CSS counter-increment Property

The counter-increment property increases a CSS counter value.

This property works with counter-reset and content properties.

Example

#

Incrementing article numbers with content, counter-reset, and counter-increment properties.

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

Fout Trends That Will Rewire the Fintech Industry

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

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

  .mydiv p::before {
    content: "Article " counter(counterincement) ". ";
    font-weight: bold;
    counter-increment: counterincement;
  }
</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>Fout Trends That Will Rewire the Fintech Industry</p>
  <p>Why Today's Price Wars Are Ecommerce's Biggest Mistake</p>
</div>

Syntax

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

Values

#

Value Description
none Default. Does not increment counters
name number name defines which counter to increment.
The number sets how the counter increments on every selector occurrences.
The default increment is 1. Negative values are also accepted (decrement).
If an id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

The counter is set to start from 10.
Its value decreases by 1 for each occurrence of the <p> selector.

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>
  .div-decrement {
    counter-reset: counterdecrement 10;
  }

  .div-decrement p::before {
    content: "Article " counter(counterdecrement) ". ";
    font-weight: bold;
    counter-increment: counterdecrement -1;
  }
</style>

<div class="div-decrement">
  <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>


Multiple counters

Multiple counters can also be implemented in CSS.

Sections and sub-sections are labeled "Section 1:", "1.1", "1.2", and so on.

Ecommerce News & Topics - Entrepreneur Part 1

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

Ecommerce News & Topics - Entrepreneur Part 2

Four Trends That Will Rewire the Fintech Industry

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

<style>
  .multiple-counter {
    counter-reset: main-counter;
  }

  .multiple-counter h4 {
    counter-reset: sub-counter;
  }

  .multiple-counter h4::before {
    counter-increment: main-counter;
    content: "Section " counter(main-counter) ". ";
  }

  .multiple-counter p::before {
    counter-increment: sub-counter;
    content: counter(main-counter) "." counter(sub-counter) " ";
  }
</style>


<div class="multiple-counter">
  <h4>Ecommerce News & Topics - Entrepreneur Part 1</h4>
  <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>


  <h4>Ecommerce News & Topics - Entrepreneur Part 2</h4>
  <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-increment 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