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.
Quick example
section {
/* Increments the 'chapter' counter every time a <section> appears */
counter-increment: chapter;
}
section::before {
content: "Chapter " counter(chapter) ": ";
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
byComputedValueType
Values
none 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.
Safe to use without fallbacks.
2+
1+
3+
12+