counter-reset: <identifier> <number>
counter-increment: <identifier> <number>
content: counter(<identifier> [, style]?)
-
counter-reset resets a counter to a specified value (default 0)
-
counter-increment increments a counter by a specified value (default 1)
- Counter can be used in generated content
- Counters defined when they are used
- Suppose a counter named listcounter is defined
<style type="text/css">
ol {counter-reset: listcounter 4}
li {display:block}
li:before {content: counter(listcounter) ": "; counter-increment: listcounter 2}
</style>
. . .
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
This generates:
- First Item
- Second Item
- Third Item
- Note li is declared as display:block to stop the normal numbering
appearing
- Counters can be nested and used with any element
(automatic chapter/section numbering, for example)
