CSS: counter (auto numbering)

Add automatic numbering

To add an automatic number counter to an h2

1. Reset/Initialize: Define the counter on a parent element (like body or html) using counter-reset.
2. Increment: add counter-increment to h2.
3. Display: Use content: counter(name) within h2::before to prepend the number.

Example

<div class="rW4Mc">
<h2>Sun</h2>
<h2>Earth</h2>
<h2>Moon</h2>
</div>

/* Initialize the counter on the body */
body {
 counter-reset: xh2;
}

.rW4Mc > h2 {
 counter-increment: xh2;
}

.rW4Mc > h2::before {
 content: counter(xh2) ". ";
}