Numbering a list with CSS!

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