Jon Kuperman

Numbering a list with CSS!

October 13, 2019

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) '. ';
}

Written by Jon Kuperman living in Florida working on Adobe's Creative Cloud. You should follow him on Twitter

Subscribe to my email list!

© 2020, Jon Kuperman