CSS Counters

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Counters (ex: counter-reset)

CSS Counters are a feature of Cascading Style Sheets (CSS) that allow web developers to create and manipulate a numerical counter, or a series of numerical counters, on a web page. Counters are useful for creating numbered lists, for example, or for tracking the number of elements on a page. They can also be used to create unique identifiers for elements on the page, such as for a navigation menu.

CSS Counters are created using the counter-reset and counter-increment properties. The counter-reset property sets the initial value of a counter to a given number, while the counter-increment property increases the value of the counter by a given number each time it is used. Counters can be used to create ordered lists, such as numbered lists, or to create unique identifiers for elements on the page.

CSS counters can be used whenever you need a counting system on your web page. Some of the best use cases are:

• Numbering complex lists
• Create dynamic pagination links
• Numbering steps in an onboarding system.

CSS counters contains the following properties:

• counter-reset: It is used to reset a counter.
• counter-increment: It basically increments a counter value.
• content: It is used to generate content.
• counter() or counters() function: Adds the value of a counter to an element

content: counters(css-counters, ".") " ";

<div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
</div>

div {
   counter-reset: css-counter 0; 
}