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…