The value of a counter can be displayed using either the counter()
or counters()
function in a content
property.
For example, the following declaration uses counter()
to prefix each h3
heading with the text Section <number>:
, where <number>
is the value of the count in decimal (the default display style):
h3::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
The counter()
function is used when the numbering of nesting levels does not include the context of parent levels. For example, here each nested level restarts from one:
1 One
1 Nested one
2 Nested two
2 Two
1 Nested one
2 Nested two
3 Nested three
3 Three
The counters()
function is used when the count for nested levels must include the count from parent levels. For example, you might use this to lay out sections as shown:
1 One
1.1 Nested one
1.2 Nested two
2 Two
2.1 Nested one
2.2 Nested two
2.3 Nested three
3 Three
The counter()
function has two forms: counter(<counter-name>)
and counter(<counter-name>, <counter-style>)
. The generated text is the value of the innermost counter of the given name in scope at the pseudo-element.
The counters()
function also has two forms: counters(<counter-name>, <separator>)
and counters(<counter-name>, <separator>, <counter-style>)
. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string (<separator>
).
The counter is rendered in the specified <counter-style>
for both methods (decimal
by default). You can use any of the list-style-type
values or your own custom styles.
Examples showing the use of counter()
and counters()
are given below in the basic example and Example of a nested counter, respectively.