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
Media
All
Computed value
Specified value
Animatable
No
CSS Version
CSS2, CSS3
JavaScript syntax
object.style.counterReset

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
812219.23
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37182510.11Yes

Last updated by CSSPortal on: 26th October 2019