CSS Counters
CSS Counters
With CSS counters, you can create dynamic numbering of elements (like headings, sections, or list items) without using JavaScript.
CSS counters are "variables" maintained by CSS, and their values can be incremented (or decremented) by CSS rules.
Pizza
Hamburger
Hotdogs
CSS Automatic Numbering With Counters
CSS counters are like "variables". The variable values can be incremented (or decremented) by CSS rules.
To work with CSS counters we will use the following properties:
counter-reset- Creates or resets a countercounter-increment- Increments or decrements a countercontent- Inserts generated content (used inside::beforeand::after, to insert the generated content)counter()andcounters()functions - Adds the value of a counter to an element
To use a CSS counter, it must first be created with the
counter-reset property.
CSS Increase and Decrease Counter
The following example creates a counter for the page (in the body selector), then it increments the counter value by 1 for each <h2> element and adds the text "Section + countervalue:" to the beginning of each <h2> element:
Example
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Try it Yourself »
The counter-increment
property has a second parameter. The default value of this is 1 (which
increments the counter by one). To decrease the counter value, you can set it to
-1.
The following example is the same as above, but here we decrement the counter value for each <h2> element and adds the text "Section + countervalue:" to the beginning of each <h2> element:
Example
body {
counter-reset: section;
}
h2::before {
counter-increment: section
-1;
content: "Section " counter(section) ": ";
}
Try it Yourself »
The following example is the same as above, but here we increment the counter value by 2 for each <h2> element and adds the text "Section + countervalue:" to the beginning of each <h2> element:
Example
body {
counter-reset: section;
}
h2::before {
counter-increment: section
2;
content: "Section " counter(section) ": ";
}
Try it Yourself »
CSS Using Two Counters
The following example creates one counter for the page (named "section") and one counter for each <h1> element (named "subsection"). The "section" counter will be counted for each <h1> element with "Section + sectioncounter>.", and the "subsection" counter will be counted for each <h2> element with "sectioncounter.subsectioncounter":
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 |
