counter-reset

The counter-reset property allows for automatic numbering of elements. Like an ordered list (<ol>), but it works on any element. It is particularly useful in creating a table of contents or numbering headings for something like a thesis paper. The counters are applied via the content property. A simple example:

article {
  counter-reset: section;
}
section {
  counter-increment: section;
}
section h2:before {
  content: counter(section) '. ';
}

The counter-reset property is used to reset a CSS counter to a given value.

It is part of the CSS counter module which is part of the generated content, automatic numbering, and lists CSS2.1 specification, extended in Generated and Replaced Content Module CSS3 specification.

Syntax

counter-reset: [<user-ident> <integer>?]  | none

Where…

• <user-ident> is the name of the counter you want to reset
• <integer> is the value to reset the counter to
• none disable the counter

body {
  counter-reset: my-awesome-counter 0;
}

Note: the default value for the integer is 0. If no integer is set after the counter name, it will be reseted to 0. Thus, this works as expected:

body {
  counter-reset: my-awesome-counter;
}

You can reset several counters at once with a space-separated list, each one with its specific value if you wish so.

body {
  counter-reset: my-awesome-counter 5 my-other-counter;
}

This will reset my-awesome-counter to 5 and my-other-counter to the default value: 0.

You can see this list as: counter1 value1 counter2 value2 counter3 value3 .... If a value is omitted, it’s 0.

Demo

In the following demo, article resets section counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.

<article>
  <section>
  <h2>Papa-bear</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>
<section>
  <h2>Mama-bear</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>
<section>
  <h2>Baby-bear</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>
</article>

* {
  box-sizing: border-box;
}

article {
  padding: 1em;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  
  counter-reset: section;
}

section {
  counter-increment: section;
}

section h2:before {
  content: counter(section) '. ';
}

Browser Support