Counters are the mechanism provided by CSS to perform numbering. They can be used to number list items, pages, footnotes, sections and any other document content that needs to be numbered.
Counter reset and increment
The counter-reset property applies to any element and initialises one or more counters to the specified values, or to zero if no value is specified.
Unless the resetting of a counter creates a nested counter, the scope of the counter includes the current element and all of its following siblings.
The counter-increment property applies to any element and increments one or more counters by the specified values, or by one if no value is specified.
The counter-increment and counter-reset properties are ignored on elements whose display property is none.
CSS
div.example1 { counter-reset: h3 h4 }
div.example1 h3 { counter-increment: h3 }
div.example1 h4 { counter-increment: h4 }
div.example1 h3::before { content: counter(h3) }
div.example1 h4::before {
content: counter(h4, lower-alpha)
}
This creates two counters inside the scope of a div element. All h3 and h4 heading elements will be numbered starting from 1 and the counter number will be placed before the heading text.
CSS
div.example2 { counter-reset: h3 }
div.example2 h3 {
counter-increment: h3;
counter-reset: h4
}
div.example2 h4 { counter-increment: h4 }
div.example2 h3::before { content: counter(h3) }
div.example2 h4::before {
counter(h4, lower-alpha)
}
In this example the h4 counter will be reset at each h3 element, to produce sub-section numbering that restarts at each new section.
Nested counters
If a counter is reset on an element and the same counter has also been reset on an ancestor of that element, a nested counter will be created. The scope of the nested counter is the current element only and its final value will not be carried onto its following siblings.
For example, a nested XHTML list with a ul element inside a li inside another ul creates a nested list-item counter.
CSS
ol { counter-reset: list-item }
li { counter-increment: list-item }
li::marker {
content: counters(list-item, ".", decimal);
color: brown;
font-weight: bold
}
Counter styles
Counter values are displayed as decimal numbers by default, but they may be displayed using other styles such as roman numerals or consecutive letters of the alphabet.
CSS
chapter { counter-increment: chapter-num }
chapter::before {
content: "Chapter " counter(chapter-num, upper-roman)
}
This rule will generate text such as "Chapter IV" before each chapter, with the appropriate chapter number displayed in uppercase roman numerals.
The following table shows examples of the various counter styles (octal, binary, lower-hexadecimal and upper-hexadecimal counter styles are also supported).
| decimal | 1, 2, 3, ... |
| decimal-leading-zero | 01, 02, 03, ... 09, 10, 11, ... |
| lower-alpha lower-latin |
a, b, c, ... z, aa, ab, ... |
| upper-alpha upper-latin |
A, B, C, ... Z, AA, AB, ... |
| lower-roman | i, ii, iii, iv, v, vi, ... |
| upper-roman | I, II, III, IV, V, VI, ... |
| asterisks | *, **, ***, ... |