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:
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.
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.
