CSS Counters

You know how you can make an ordered list in HTML and get, well, numbers? Like

It’s not the only way to do it, though.

You don’t even need to create any elements: you can declare, through CSS, something like virtual elements using ::before and ::after. You can declare them to have content with { content: ... }.

What makes it really interesting is that the content can have counters.

Counters

Counters are numbers that start at 0. They can be incremented by specific elements & used by the same (or others).

The counters can be reset by other elements, so if you reset the counter in parent elements & use them in children, it’s like they’re scoped.

So if I have some structure like

<div class="parent">
	<p>...</p>
	<p>...</p>
	...

We can prefix each paragraph with a number, just like an ordered list

.parent {
    counter-reset: number;
}
p::before {
    content: counter(number);
}
p {
    counter-increment: number;
}

How crazy is that ?

Like I knew we could do it, but in JavaScript. This is declarative ! No scripting engine needed, no fixing up stuff when the page loads.

One caveat: it seems like they only update when you add nodes, not when you remove them. So maybe stick to like React-type interfaces if you want to avoid that. Mixing the declarative & imperative seems to only half-work.

Still, pretty impressive! I have been rather … chuffed with what I’ve learned about CSS recently.

2026 Mar 21

Counters