Jon Kuperman

Numbering a list with CSS!

Numbers on a race track
Photo by Austris Augusts on Unsplash

Yesterday, I converted my site to 11ty. I decided to use their base blog starter and when I did, I noticed this cool UI they have for listing your posts.

Screenshot of my website

When I went to change the styling, I noticed that these numbers get added, entirely with CSS! Let's take a look at how they do this.

This works by combining CSS counter increment with CSS counters. All you have to do is this:

<ol class="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

And then style it with

.myList li {
counter-increment: start-from 1;
}
.myList li:before {
content: "" counter(start-from, decimal-leading-zero) ". ";
}

← Home