CSS将前导零添加到有序列表自定义计数器 [英] CSS to add leading zero to an ordered list custom counter

问题描述

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

An ordered list with a custom counter:

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的列表项之前的前导零.

A leading zero before any list item numbered less than 10.

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

I.e. 01, 02, 03, 04, 05, 06, 07, 08, 09, 10.

如何通过CSS达到所需的前导零?

How can I achieve the required leading zero via CSS?

推荐答案

来自:斯文·沃尔夫曼通过CodePen

From: Sven Wolfermann via CodePen

您可以通过在li:before{ content: counter(...); }

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

这篇关于CSS将前导零添加到有序列表自定义计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！