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
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.counterReset

Interactive Demo

Learning CSS

Forward
Introduction to CSS
Color
Text
The Box Model
Lists

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

The following table will show you the current browser support for the CSS counter-reset property.

Desktop
Edge Chrome Firefox Opera Safari
12219.23
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
182510.1114.4

Last updated by CSSPortal on: 1st January 2024