🎯 CSS Counter Property

The CSS counter feature allows you to create automatic numbering systems without using JavaScript. It is commonly used for numbering headings, sections, tutorials, FAQs, and custom lists.

CSS counters automatically update when content is added, removed, or reordered, making them extremely useful for maintaining structured documents and tutorials.

• counter-reset → Creates or resets a counter
• counter-increment → Increases the counter value
• counter() → Displays the current counter value

The counter-reset property creates a new counter or resets an existing counter to its starting value.

body {
    counter-reset: section;
}
                

This creates a counter named section and starts it at 0.

The counter-increment property increases the value of a counter whenever the selected element appears.

h2 {
    counter-increment: section;
}
                

Every h2 element increases the counter by one.

The counter() function displays the current value of a counter.

h2::before {
    content: counter(section) ". ";
}
                

This automatically places the counter value before each heading.

The second parameter of counter() determines how the counter value is displayed.

The following example automatically numbers headings using uppercase Roman numerals.

body {
    counter-reset: section;
}

h2 {
    counter-increment: section;
}

h2::before {
    content: counter(section, upper-roman) ". ";
}
                

<h2>Introduction</h2>
<h2>Methods</h2>
<h2>Results</h2>
                

Output:

• I. Introduction
• II. Methods
• III. Results

• Automatic heading numbering
• Step-by-step tutorials
• Custom ordered lists
• FAQ sections
• Technical documentation
• Multi-level navigation menus

• A counter must be created using counter-reset before it can be used.
• counter-increment changes the counter value.
• counter() is typically used inside the content property.
• Counters automatically update when page content changes.
• No JavaScript is required for automatic numbering.