Counter Increment Property
Last updated: 2026-09-13
counter-increment Counter Increment Property
counter-increment increases the value of one or more CSS counters and is one of the core mechanisms behind automatic numbering. Each time an element matches the selector, the specified counter is increased by the given step (1 by default). It needs counter-reset and content's counter() function to produce complete automatic numbering.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
counter-increment: none | <counter-name> <integer>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | Do not increment |
<counter-name> <integer>? | Value | Counter name and step |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| counter-increment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： counter-increment only increments; it does not display the value. Pair it with content: counter(name) to output the number on the page.
❓ FAQ
QWhat is the difference between counter-increment and counter-reset?
Acounter-reset creates and initializes a counter (setting its start value, 0 by default), usually declared on the parent container. counter-increment increases the counter each time an element matches (by 1 per match by default), usually written on the elements being numbered. Together with content's counter() function they produce complete automatic numbering.
QHow do I create multi-level numbering like 1.1, 1.2?
AUse two counter levels: an outer counter-reset: chapter plus counter-increment, and an inner counter-reset: section plus counter-increment, then output with content: counter(chapter) "." counter(section);. That yields 1.1-style numbering.
QCan the counter-increment step be something other than 1?
AYes. counter-increment: myCounter 2; increments by 2 each time; omitting the number defaults to 1. You can also increment several counters at once, e.g. counter-increment: a 1 b 2;, and negative values work too. Remember it only changes the counter value — you must output it with counter() in content to see the numbers.
QDo counters get mixed up in nested lists?
ANo. CSS counters are scoped: declaring counter-reset on an element creates a new counter instance that shadows the parent's, so child lists restart from their initial value. For example, each <ol> that resets its counter produces numbering independent of the others. To continue numbering, skip the reset, or use counters() to output the full hierarchical path.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
counter-reset Property
Create and initialize counters
content Property
Output counter values with counter()
