CSS: automatic chapter numbering with counters

Tweet

If your web page is divided in chapters fetched from a database, you can automatically number those chapters, using CSS counters. The solution is very useful in situation where the numbering is in some way dynamic.

Imagine we get chapters from our database, and list them like:

chapter 1
chapter 2
chapter 3

and so on...
What we will achieve is to automatically show them as:

1. chapter 1
2. chapter 2
3. chapter 3

Isn't it nice? Let's see how we can do it.