CSS counter-reset Property

A counter is an incrementing variable that can be used in CSS.

The counter-reset property resets a CSS counter value.

This property works together with counter-increment and content.

Example

#

A counter-reset that initializes the article counter.

Major Announcements From the Shopify Unite Conference

Build a Side Hustle Through Amazon With This Bundle

How to Massively Grow Your Amazon Business in 8 Steps

Four Trends That Will Rewire the Fintech Industry

Why Today's Price Wars Are Ecommerce's Biggest Mistake

<style>
  .mydiv {
    counter-reset: number 0;
  }

  .mydiv p::before {
    counter-increment: number;
    content: "Article " counter(number) ". ";
    font-weight: bold;
  }
</style>

<div class="mydiv">
  <p>Major Announcements From the Shopify Unite Conference</p>
  <p>Build a Side Hustle Through Amazon With This Bundle</p>
  <p>How to Massively Grow Your Amazon Business in 8 Steps</p>
  <p>Four Trends That Will Rewire the Fintech Industry</p>
  <p>Why Today's Price Wars Are Ecommerce's Biggest Mistake</p>
</div>

Syntax

counter-reset: none | name number | initial | inherit;

Values

#

Value Description
none Default. Counters will not be incremented
name number name defines which counter to reset.
It sets the counter value reset to every occurrence of the selector.
The number specifies where should the counter start from, this is optional.
The default starting number is 0.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

A counter-reset that initializes a counter. By default it start at 0.
The counter values are formatted as uppercase Roman numerals.

Major Announcements From the Shopify Unite Conference

Build a Side Hustle Through Amazon With This Bundle

How to Massively Grow Your Amazon Business in 8 Steps

Four Trends That Will Rewire the Fintech Industry

Why Today's Price Wars Are Ecommerce's Biggest Mistake

<style>
  .counter-roman {
    counter-reset: number 0;
  }

  .counter-roman p:before {
    counter-increment: number;
    content: "Article " counter(number, upper-roman) ". ";
    font-weight: bold;
  }
</style>

<div class="counter-roman">
  <p>Major Announcements From the Shopify Unite Conference</p>
  <p>Build a Side Hustle Through Amazon With This Bundle</p>
  <p>How to Massively Grow Your Amazon Business in 8 Steps</p>
  <p>Four Trends That Will Rewire the Fintech Industry</p>
  <p>Why Today's Price Wars Are Ecommerce's Biggest Mistake</p>
</div>

Browser support

This table shows when counter-reset support started for each browser.

Chrome
4.0 Jan 2010
Firefox
2.0 Oct 2006
IE/Edge
8.0 Mar 2009
Opera
9.6 Oct 2008
Safari
3.1 Mar 2008

You may also like

Guides