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);
}