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