带有数字填充的 CSS 计数器

Question

是否可以counter根据其值填充数字？

div {
  counter-reset: ruler;
}

div > span {
  display: block;
  line-height: 1rem;
}

div > span::before {
  counter-increment: ruler;
  content: counter( ruler ) ' ';
}

<div>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
</div>

就像如果有 42 行，数字将像09或 9、 420 —009或  9。

Answer 1

在计数器内使用十进制前导零。

div {
  counter-reset: ruler;
}

div > span {
  display: block;
  line-height: 1rem;
}

div > span::before {
  counter-increment: ruler;
  content: counter( ruler , decimal-leading-zero) ' ';
}

<div>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
</div>