CSS counter-increment Property

Description

The counter-increment property is intended to increase the value of the increment counter, which is set by the counter-reset property. Such a counter counts the number of displays of elements on the page and can be displayed using the content property and pseudo-elements ::after and ::before. This allows you to create lists (including multi-level), in which the numbering and view are set through styles.

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

Syntax

counter-increment: [ <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