CSS Counter with a Number Padding

Question

Is it possible to pad counter numbers depending on its value?

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>

Like if there are 42 lines, numbers will be like 09 or 9, 420 — 009 or 9.

Does this answer your question? [CSS to add leading zero to an ordered list custom counter](https://stackoverflow.com/questions/49910720/css-to-add-leading-zero-to-an-ordered-list-custom-counter) — Sunil Chaudhary, Dec 17 '19 at 07:20
Here is a solution: https://stackoverflow.com/a/43014210/6487887 for 3 digits as well. Might help you — Sunil Chaudhary, Dec 17 '19 at 07:34
here is a more generic solution if you don't want the leading zero https://stackoverflow.com/a/58866150/8620333 — Temani Afif, Dec 17 '19 at 09:08
@TemaniAfif wow, this is REALLY helped me — the best solution of all was suggested. I will be using this. — Monsieur Pierre Doune, Dec 18 '19 at 07:40

score 11 · Accepted Answer · answered Dec 17 '19 at 07:21

Use decimal-leading-zero inside the counter.

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>

awesome! didn't know about this. I noticed however that once you get to 100, the numbers before that don't have leading zeros, so the alignment goes off again — Craig Wayne, Dec 17 '19 at 07:25

score 0 · Answer 2 · answered Dec 17 '19 at 07:30

Without leading zeroes and aligned right. But since it uses a static width you'd have to adjust that if you expect more than 999 lines.

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 Counter with a Number Padding

2 Answers2

Linked