如何为自定义计数器的有序列表添加前导零（CSS实现）

很简单，只需要调整CSS中计数器的输出格式就能实现前导零效果。我们可以利用CSS计数器的decimal-leading-zero样式，它会自动给个位数的编号加上前导零（比如1→01，2→02）。

修改后的完整CSS代码 #

ol { 
  /*list-style-type:decimal-leading-zero;*/ 
  list-style: none; 
  padding-left: 0px; 
  counter-reset: item; 
}
ol>li { 
  display: table; 
  counter-increment: item; 
}
ol>li:before { 
  display: table-cell; 
  padding: 0 0.5em 0 0; 
  /* 这里把counter(item)改成counter(item, decimal-leading-zero) */
  content: counter(item, decimal-leading-zero) "."; 
  font-weight: bold; 
}

HTML代码（无需修改） #

<ol>
 <li>List item one.</li>
 <li>List item two.</li>
 <li>List item three.</li>
 <li>List item four.</li>
 <li>List item...</li>
</ol>

这样修改后，你的列表就会显示出带前导零的编号：01. List item one.、02. List item two.，以此类推，同时保留了你原来设置的自定义布局和加粗编号的样式。

内容的提问来源于stack exchange，提问作者Clarus Dignus