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

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.counterIncrement

Interactive Demo

counter-increment: item;

counter-increment: item 2;

counter-increment: item 4;

counter-increment: item -3;

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

The following table will show you the current browser support for the CSS counter-increment 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