Home 〉 CSS Tutorials 〉 CSS Counter Tutorial: How to Use CSS Counters with Examples

CSS Counter Tutorial: How to Use CSS Counters with Examples !

CSS Counter Tutorial: How to Use CSS Counters with Examples !

Looking to create automatic numbering in your lists or headings? CSS counters allow you to implement automatic numbering without JavaScript. This tutorial explains how to initialize, increment, and display counters for various elements. Enhance your content structure with dynamic numbering. Check out out Tutorial on CSS Counter

CSS Counter Tutorial - Step by Step Guide with Examples

If you've ever wanted to add automatic numbering to lists, sections, or headings using just CSS — CSS Counters are what you need. They let you control numbering without writing extra HTML or JavaScript.

Let's break it down in a beginner-friendly way with practical examples.

What is a CSS Counter?

A CSS counter is a feature in CSS that allows you to increment numbers and display them on elements like lists, headings, or paragraphs — all using pure CSS. It's great for:

  • Custom list styles
  • Auto-numbering sections or steps
  • Outline or table of contents styling

Basic Syntax

Here's the basic flow:

Syntax ✍

/* Step 1: Reset or create the counter */
body {
counter-reset: my-counter;
}
/* Step 2: Increment the counter */
h2::before {
counter-increment: my-counter;
content: "Section " counter(my-counter) ": ";
}

Example 1: Numbering Headings Automatically

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

body {
counter-reset: section;
}
.counters::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

</style>
</head>
<body>

<h2 class="counters">Introduction</h2>
<h2 class="counters">CSS Counter Basics</h2>
<h2 class="counters">Advanced Counter Usage</h2>

</body>
</html>

output 📌

Introduction

CSS Counter Basics

Advanced Counter Usage

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

What This Does:

  • counter-reset starts the counter at 0.
  • counter-increment increases the counter every time an '<h2>' is rendered.
  • 'content' displays the counter before the heading.

Example 2: Nested Counters (Chapters and Subsections)

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

body {
counter-reset: chapter;
}
h2 {
counter-reset: sub;
}
.counter::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
}
.sub-counter::before {
counter-increment: sub;
content: counter(chapter) "." counter(sub) " ";
}

</style>
</head>
<body>

<h2 class="counter">Getting Started</h2>
<h3 class="sub-counter">What is CSS?</h3>
<h3 class="sub-counter">Why Counters?</h3>
<h2 class="counter">Practical Usage</h2>
<h3 class="sub-counter">List Numbering</h3>
<h3 class="sub-counter">Nested Headings</h3>

</body>
</html>

output 📌

Getting Started

What is CSS?

Why Counters?

Practical Usage

List Numbering

Nested Headings

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

What This Does:

  • Resets sub-counter inside each new chapter.
  • Displays sub-sections like 1.1, 1.2, 2.1, etc.

Example 3: Styling a Custom Numbered List

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

ol.custom-counter {
counter-reset: custom;
list-style: none;
padding-left: 0;
}
ol.custom-counter li {
counter-increment: custom;
margin-bottom: 10px;
}
ol.custom-counter li::before {
content: counter(custom) ". ";
font-weight: bold;
color: #007acc;
}

</style>
</head>
<body>

<ol class="custom-counter">
<li>Install CSS</li>
<li>Set up HTML</li>
<li>Apply Counters</li>
</ol>

</body>
</html>

output 📌

  1. Install CSS
  2. Set up HTML
  3. Apply Counters
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

What This Does:

  • Hides the default list number using 'list-style: none'.
  • Adds a styled number using the counter.

CSS Counter Properties Recap

Property Purpose
'counter-reset' Creates or resets a counter to zero
'counter-increment' Increments the counter when an element appears
'counter()' Retrieves the value of the counter
'::before' or '::after' Used to insert the counter content

Conclusion

CSS Counters are a clean and powerful way to add automatic numbering to your elements without extra markup or scripts. They're great for improving structure, styling, and SEO in your content. By understanding 'counter-reset', 'counter-increment', and 'counter()', you can create highly customizable layouts.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

Do CSS counters work in all browsers?

Yes, CSS counters are supported by all major modern browsers.

Can I have multiple counters on the same page?

Yes! You can create multiple counters with different names and nest them too.

Can I style the number separately from the text?

Yes. You can wrap them in spans or use '::before' for styling.

Is CSS counter good for accessibility?

It can be, but screen readers may not read CSS-generated content. Combine it with semantic HTML for best results.

Previous Post Next Post