CSS Nested Counters
CSS Using Two Counters
You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one counter for each <h1> element (named "subsection"):
Example
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
Try it Yourself »
The CSS counters() Function
The counters()
function returns the current values of the named and nested counters, as a
string.
Here we use the counters() function to
insert a string between different levels of nested counters:
Example
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Try it Yourself »
CSS Counter Properties
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |
| counters() | Returns the current values of the named and nested counters |
