CSS Counters (Automatic Numbering)

In this lesson you'll learn the mechanism of automatic numbering with CSS counters, so you can build custom sequential numbering that a standard list alone can't achieve. This is for people searching "CSS counter usage."

Using counter-reset and counter-increment lets you achieve an "automatically increasing number," like a numbered list, using CSS alone. You display the number with content: counter(name).

The sample code initializes a counter with counter-reset: step; on ol.custom, increases it by 1 on each li with counter-increment: step;, and displays a string like "STEP 1" using the ::before pseudo-element. Also notice that the standard <ol> numbering is hidden with list-style: none;.

A common beginner stumbling block is the difference in role between counter-reset and counter-increment. reset is the initialization step, telling the counter to "start counting from 0," while increment tells each item to "add one." These two work together as a set.

Sequential numbering that includes a string like "STEP 1," "STEP 2," or a number display with its own custom design — things a plain <ol> can't achieve on its own — can be freely built once you use counters.