The value for counter-reset could be anything. Here, I’ve used ordered-list, but it could be: my-awesome-counter, i-am-a-css-master, or whatever. The important thing is to be consistent when we reference it later.
Then, we can use the pseudo-element :before to apply our counter. :before simply injects content before the item we're referencing. In this case, our list item.
I want the color of our number to be pink, the font to be sans-serif, and the size to be 38px.
You’ll notice our ordered-list referenced in the content and counter-increment properties.
content displays the number
counter-increment increases the value with each list item.
Then, we want to position the number. Positioning is always relative to the parent element. Here, the parent element is the list item. Fortunate for us, we gave the list item a position of relative, up above.
Ta da. Altogether now. Here’s all the CSS in one place: