CSS counter-reset Property
Description
The counter-reset
property sets the variable in which the counter of the mappings of a certain element will be stored, as well as the initial value of the counter. Such a counter can be displayed using the content property and pseudo-elements ::after and ::before .
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.counterReset
Interactive Demo
Learning CSS
ForwardIntroduction to CSS
Color
Text
The Box Model
Lists
Syntax
counter-reset: [ <custom-ident><integer>? ]+ | none
Values
- noneThis element does not alter the value of any counters.
- <custom-ident><integer>?The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).
Example
<h2>Chapter title</h2>
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
<h2>Chapter title</h2>
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
<h2>Chapter title</h2>
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
body {
counter-reset: counter1;
line-height: .3em;
}
h2 {
counter-reset: counter2;
}
h2::before {
counter-increment: counter1;
content: "Chapter No. " counter(counter1) ". ";
}
h3 {
margin-left: 20px;
}
h3::before {
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) " " ;
}
Browser Support
The following table will show you the current browser support for the CSS counter-reset
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 2 | 1 | 9.2 | 3 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 25 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 1st January 2024