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 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; 
}