@counter-style

A list marker you define yourself

Live demo

Caveat and fallback

CaveatThe system and the symbols have to agree: a numeric system needs at least two symbols and the first one stands for zero, so a set that starts at "1" counts wrongly rather than failing loudly. pad counts characters and not digits, and it pads the number only, never the suffix. ::marker itself takes a short list of properties, mostly colour, font and content, so a marker cannot be given a box of its own.

FallbackA style the browser cannot build falls back to the fallback descriptor, or to decimal when you have not named one, so the list is always numbered and never blank. That is the rare case where the failure mode is genuinely harmless, which is why this is worth reaching for before a wrapper element and a hand-drawn pseudo-element.

Source code

<ol class="steps"><li>Unpack</li></ol>

@counter-style padded {
  system: numeric;      /* first = zero */
  symbols: "0" "1" "2" "3" "4"
           "5" "6" "7" "8" "9";
  pad: 2 "0";          /* 01, 02, ... 10 */
}
.steps { list-style: padded; }
.steps li::marker { color: #6fa8dc; }

Published 3 Nov 2026