html - 将前导零添加到有序列表自定义计数器的 CSS

Question

我有什么:

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

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 实现所需的前导零？

Answer 1

发件人:Sven Wolfermann通过 CodePen

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

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