What it is: CSS can count elements for you and show the number with ::before or ::after. You never type the numbers by hand, so if you add or remove an item the numbering updates automatically.

The three pieces

• counter-reset: creates a counter and sets its starting value, usually on a parent.
• counter-increment: adds one each time an element appears.
• counter(): prints the current value, used inside content.

Numbered headings in a post

css">.entry-content {
    counter-reset: lotgrafix-section;
}

.entry-content h2::before {
    counter-increment: lotgrafix-section;
    content: counter( lotgrafix-section ) ". ";
    color: orangered;
}

Numbered steps with circles

<ol class="lotgrafix-steps">
    <li>Install the plugin</li>
    <li>Activate it</li>
    <li>Configure the settings</li>
</ol>

.lotgrafix-steps {
    list-style: none;
    padding: 0;
    counter-reset: lotgrafix-step;
}

.lotgrafix-steps li {
    counter-increment: lotgrafix-step;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.lotgrafix-steps li::before {
    content: counter( lotgrafix-step );
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: orangered;
    color: #fff;
    font-weight: bold;
}

Nested numbering like 1.1 and 1.2

Use counters() with a separator to join the levels.

.lotgrafix-outline,
.lotgrafix-outline ol {
    list-style: none;
    counter-reset: lotgrafix-item;
}

.lotgrafix-outline li::before {
    counter-increment: lotgrafix-item;
    content: counters( lotgrafix-item, "." ) " ";
}

Counter styles

Add a second argument to change the number format.

li::before {
    content: counter( lotgrafix-step, upper-roman ) ". ";
}

Other styles: lower-alpha, upper-alpha, decimal-leading-zero and lower-roman.

Start from a different number

.lotgrafix-steps {
    counter-reset: lotgrafix-step 4;
}