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

HTML

<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>

CSS

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) " " ; 
}

Result