Css Module 39

  Module 39 : CSS Counters & Numbering – Using Counters to Style Ordered Lists Dynamically

             

                

   

focuses on the use of CSS counters, a powerful feature for dynamically numbering elements such as lists, sections, or custom content. Students will learn how to initialize, increment, and display counters using pure CSS—ideal for dynamic document styling without relying on JavaScript.

Learning Objectives

Understand what CSS counters are and how they work.

Create and manipulate counters with CSS.

Style ordered lists and headings dynamically using custom counters.

Apply counters to real-world use cases like table of contents, nested numbering, and styled section headers.

Core Concepts & Explanations

1. What are CSS Counters?

CSS counters are variables maintained by CSS whose values can be incremented by CSS rules and displayed in content using the content property. This allows dynamic numbering of elements such as lists, chapters, sections, or figures.

2. Syntax and How Counters Work

CSS provides three main functions to work with counters:

counter-reset: Initializes or resets the counter to a specific value.

counter-increment: Increases the counter's value.

content: counter(name): Displays the counter value in a pseudo-element (::before or ::after).

3. Step-by-Step Example

Let’s dynamically style an ordered list:

HTML

html code

<ul class="dynamic-list"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

CSS

css

code

.dynamic-list { counter-reset: list-counter; list-style: none; padding: 0; } .dynamic-list li { counter-increment: list-counter; margin: 10px 0; position: relative; } .dynamic-list li::before { content: counter(list-counter) ". "; font-weight: bold; color: #2a9d8f; position: absolute; left: -30px; }

Explanation:

counter-reset initializes the counter named list-counter.

Each <li> increments list-counter by 1.

::before injects the current counter value before each list item with styling.

4. Nested Lists with CSS Counters

CSS counters can be nested, allowing complex structures like multi-level outlines.

     

  

     

HTML

html

 code

<ol class="nested-counter"> <li>Section <ol> <li>Subsection</li> <li>Another subsection</li> </ol> </li> <li>Another Section</li> </ol>

CSS

css

 code

.nested-counter { counter-reset: section; } .nested-counter > li { counter-increment: section; } .nested-counter > li::before { content: counter(section) ". "; font-weight: bold; } .nested-counter ol { counter-reset: subsection; } .nested-counter ol > li { counter-increment: subsection; } .nested-counter ol > li::before { content: counter(section) "." counter(subsection) " "; margin-left: 20px; font-style: italic; }

5. Styling Headings Like a Table of Contents

HTML

html

code

<div class="toc"> <h2>Introduction</h2> <h2>Chapter One</h2> <h2>Chapter Two</h2> </div>

CSS

css

code

.toc { counter-reset: chapter; } .toc h2 { counter-increment: chapter; } .toc h2::before { content: "Chapter " counter(chapter) ": "; font-weight: bold; color: #264653; }

    Exercises

Exercise 1: Custom Ordered List with Icons

Use ::before and counter() to create a custom styled list where each item is prefixed with a number in a circle.

Exercise 2: Multi-Level Numbering

Create a 3-level nested ordered list with full numbering (e.g., 1.2.3).

Exercise 3: Dynamic Section Headings

Style h2 and h3 headers with section numbering like 1., 1.1, 1.2, etc.

Exercise 4: Resume Template

Build a resume layout where experience or project sections are auto-numbered with CSS counters.

        Outline

Section

Topic

Time (min)

1

Introduction to CSS Counters

10

2

Basic Counter Implementation

15

3

Styling Ordered Lists

15

4

Nested Numbering with Lists

20

5

Applying to Headings and TOC

15

6

Hands-on Exercises

25

7

Q&A + Wrap-up

10

Assessment and Review

             

 

Quiz: Multiple choice and short answers covering counter-reset, counter-increment, and content.

Practical Task: Style a 2-level FAQ section with numbered questions and subquestions.

Conclusion

CSS counters provide a clean, semantic way to handle dynamic numbering and structured content styling without JavaScript. They're ideal for responsive, maintainable designs—especially for documentation, TOCs, and content-heavy layouts.