Custom Numbered Lists With CSS

This week was my turn to find something cool and share with the team.
And now I’d like to share this with you, so let me give you a summary of CSS counters!

Just like the author Samuel Oloruntoba notes in this article, web developers had to previously resort to an approach like the following:

PHP HTML Example of Archaic Solution
Photo / Code Credit – Samuel Oloruntoba

The reason why this solution is less than desired is that it puts more logic into our markup than is necessary, whereas now we can simply specify this sort of functionality in our stylesheets.

Markup for CSS Counter Example
SCSS for CSS Counter Example

With additional styling, this results in the following:

See the Pen
Increment by +X
by Salvatore Torcivia (@SalTor)
on CodePen.

And in addition to incrementing / decrementing decimal values, we also have access to lower/upper-roman, lower/upper-latin, and several other symbolic counters.