【问题标题】：CSS to add leading zero to an ordered list custom counterCSS将前导零添加到有序列表自定义计数器
【发布时间】：2018-09-29 08:18:00
【问题描述】：

我有什么：

带有自定义计数器的有序列表：

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;
  content: counter(item) ".";
  font-weight: bold;
}

<ol>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
  <li>List item four.</li>
  <li>List item five.</li>
  <li>List item six.</li>
  <li>List item seven.</li>
  <li>List item eight.</li>
  <li>List item nine.</li>
  <li>List item ten.</li>
</ol>

我需要什么：

任何编号小于 10 的列表项之前的前导零。

即01、02、03、04、05、06、07、08、09、10。

我的问题：

如何通过 CSS 实现所需的前导零？

【问题讨论】：

codepen.io/maddesigns/pen/JGQejg
@Doug 谢谢。这行得通。关于我的代码，我只需要在item 之后立即添加, decimal-leading-zero 即可获得ol>li:before。请张贴作为答案，让我接受您的解决方案。

标签： html css html-lists css-counter

【解决方案1】：

发件人：Sven Wolfermann 来自 CodePen

您可以通过将decimal-leading-zero 添加到您的li:before{ content: counter(...); } 中来添加前导零

li:before {
  counter-increment: li;
  content: counter(item, decimal-leading-zero);
}

【讨论】：

谢谢。您链接到的示例使我能够了解如何通过编辑内容/计数器值来合并前导零。