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.
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>
counter-reset: none | name number | initial | inherit;
| 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. |
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>
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 |
