CSS counter-increment Property
Example
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The counter-increment property increases or decreases the value of one or
more CSS counters.
The counter-increment property is usually used together with the
counter-reset property and the
content property.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.counterIncrement = "subsection"; Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
counter-increment: none|id|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | Default value. No counters will be incremented |
| id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Try it Yourself »
Example
Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Try it Yourself »
Example
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Try it Yourself »
Related Pages
CSS reference: ::before pseudo element
CSS reference: ::after pseudo element
CSS reference: content property
CSS reference: counter-reset property
CSS functions: counter() function
HTML DOM reference: counterIncrement property