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

<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
8	12	2	1	9.2	3
Tablets / Mobile
1	18	25	10.1	1	1.0

Last updated by CSSPortal on: 26th October 2019