1st, 2nd, 3rd, nth … Generating Dynamic Ordinal Numbers with just CSS

To understand CSS Counters and what we can use them for, what the possibilities and also limitations are, let’s look at an interesting challenge: try and count DOM elements on the page and label them with dynamically generated ordinal numbers!

To start counting we need a few elements on the page. Let’s start with 100 list items in an unordered list:

<main>
  <h1 id="main-title">The power of counters</h1>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <!-- 100 items in total -->
  </ul>
<main>

To count all the list items, we need to initialise a CSS counter with an initial value and we can do exactly that with the counter-reset property:

main {
  padding: 50px;
  counter-reset: list-counter 0;
}

The counter-reset property can be added to any of the ancestor elements where we want the counter to reset to 0. In this instance, we added it to main, but we could have added it to body, html or the :root.

Next, we need to add the counter-increment property to the selector where we want the list-counter to be incremented. To count every single list item, we add it to the li element selector:

li {
  margin-bottom: 20px;
  margin-left: 50px…