CSS Counter
comment 0

CSS Counters

CSS counters can easily qualify as one of those CSS features that not many of us had ever use or even heard of. With CSS counters you can have a running numerical counter all in CSS. You can think of it like an HTML ordered list tag but with more control. While real world usage may not be so practical or straightforward, this article by Will Boyd showcases some really cool things you can do with CSS counters.

Below is the most basic implementation:

body {
    counter-reset: pages; // initialize counter with a variable called "pages"
a {
    counter-increment: pages; // increment counter for every <a> tag
a::before {
    content: counter(pages); // display counter

Hit the button below to learn more and hopefully you’ll get inspired.

View More

Filed under: CSS

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply