counter-increment
Advances a CSS counter by a specified value (default is 1). It's commonly used to number items like chapters, sections, or images in complex documents.
It is documented as part of the CSS Lists and Counters specification.
Syntax
/* Usage Example */
section {
/* Increments the 'chapter' counter every time a <section> appears */
counter-increment: chapter;
}
section::before{
content: ";Chapter " counter(chapter) ": ";
}
/* Syntax */
counter-increment: none;
/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;counter-increment Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
2+
1+
3+
12+