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

您可以通過在li:before{ content: counter(...); }添加decimal-leading-zero前導零來添加前導零li:before{ content: counter(...); } li:before{ content: counter(...); }

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