The counter-increment property increases a CSS counter value.
This property works with counter-reset and content properties.
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>
counter-increment: none | name number |
initial | inherit;
| 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. |
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 can also be implemented in CSS.
Sections and sub-sections are labeled "Section 1:", "1.1", "1.2", and so on.
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>
.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>
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 |
