Ol.count-backwards.lower-greek > li:beforeĬontent:counter(start-from, lower-greek) ". Here’s one for lower-case greek ( example5): We can even define additional class rules to implement different types of counter. I’ve used "start-from" as the counter name so that it’s easy to remember what it is and what it does ( example4): Then we instantiate a counter instance with a counter-reset style, defining the starting number (or rather, one-higher than the starting number, as we’ve seen). So first we have the following stylesheet rules, which define an activating class, and the counting rule (there are also a couple of CSS hacks for IE6 and IE7, to restore their normal list-style since the counters won’t work): The thing to do then is split the rules between a stylesheet and an inline style rule. Of course the fact that we have to hard-code the starting number at all makes this difficult to use in the wild, because the lists it encounters will generally have different numbers of items. The thing to note is how we have to start counter-reset one-count higher than the highest number we want to display, because the iterating property counter-increment has already counted once when the first element is displayed (it’s counted that element). So here’s an example of a counter that goes backwards from ten to one ( example3): Now here’s the cunning bit! The additional value in counter-increment doesn’t have to be positive, it can also be zero or negative. Here’s another example, this time starting from ten and counting up in twos ( example2): Here’s a simple example, that re-creates the numbering of a standard ordered-list ( example1):īut as I said earlier, you can “seed” both these properties with additional values, so that they start from a different number and/or count in different steps. With two properties, you declare the name of a counting variable in a base selector, then increment it in an instance selector the result is then typically output using the content property. The basic idea with counters is that they allow you to implement number-systems in CSS, essentially replacing and supplementing ordered-list attributes like value and start. Neither did I until I needed it, and I discovered that the counter-reset and counter-increment properties can be “seeded” with extra numbers, intended to allow for more flexible numbering, which can also be used to make them count backwards! Did you know that CSS Counters can go backwards?