Counting on counter() and friends
The good old
<ol> has been around a long time for creating numbered lists, but it has always been rather limited in its use.
In CSS2.1 generated content has been added to the spec. With generated content you can define counters and add them (together with other content)
to any element with the
:after pseudo-elements. So, today's entry isn't that cutting-edge, but
as browser support has been lacking (we're looking at you IE!) it's not something you see in a lot of websites.
How does it work?
Basically there are three things we need to specify to make counters work: we have to set a
counter-reset: countername, a
counter-increment: countername and
we have to place the counter with
content: counter(countername). With
counter-reset: countername 1 we reset the counter
"countername" to value 1 (which is the default so it can be omitted). With
counter-increment: countername 1 we increment the counter by one (the amount is optional and defaults to one). To place
the counter we use a
:after pseudo-element with
content: counter(countername, decimal). As
you see we use a decimal counter here, but this could be any valid list-style-type.
A more advanced topic is the
counters() function which makes working with nested lists a breeze. We're not going
to cover that here, but this article on the Mozilla Developer Network explains how counters work.
Show us the source!
Feel free to look around the different source files we used for this example.