Numbering a list with CSS!
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.
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.