Tom’s Two Cents: How to use CSS Counters

June 23, 2015

Blog | Development | Tom’s Two Cents: How to use CSS Counters
Tom’s Two Cents: How to use CSS Counters

In this line of work, it’s common to have lists and technical implementations that need to be organized well on a daily basis. It’s hard to keep track of everything.

You know as well as I do how time consuming creating and maintaining these documents can be. I’ve done some digging and found the perfect solution, CSS counters. They allow you to change the appearance of content based on it’s placement in a quick and efficient manner. They save you time and reduce frustration levels that typically rise when a deadline is looming.

Mozilla Developer Network, defines CSS counters as “variables maintained by CSS whose values may be incremented by CSS rules to track how many times they’re used.” This functionality can be particularly useful when you’re working with a table of contents, or looking for a different way to present a group of list items.

CanIUse.com reports that CSS counters are fully supported by all major modern browsers (phew!).

Try them out for yourself and breathe a little easier the next time you need to organize your work.  

I’ve put together a quick demo that shows how CSS counters are used, check it out on JSFiddle. And #ICYMI, be sure to check out my other demos and tutorials. You can find them here.

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS
  • Tutorial

Recent Work

Check out what else we've been working on