This is a 1 min read · Published on 13 Oct 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) ". ";
}

Subscribe to my email list!

Let me be real with you. Sometimes when I'm bored I log in to Buttondown and look at the audience number. If it's bigger than it was the week before, well that makes me feel really happy! I promise I'll never spam you and I will, at most, send you a monthly update with what's happening on this site.