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>

Answer 2

没有前导零且右对齐。但由于它使用静态宽度，如果您希望超过 999 行，则必须进行调整。

document.querySelector("div").innerHTML = `<span>Hello, World!</span>`.repeat(150);

div {
  counter-reset: ruler;
}

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

div>span::before {
  counter-increment: ruler;
  content: counter( ruler) '\A0';
  width: 2em;
  display: inline-block;
  text-align: right;
}

<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>

CSS 带有数字填充的计数器

CSS Counter with a Number Padding

html

javascript

css

css-counter

zero-padding