Prev Next

CSS Counters

CSS counters are used to create automatic numbering, often used for headings, sections, or lists. They provide a simple way to manage content numbering using the counter-reset, counter-increment, and content properties in CSS.

Key Topics

Counter Basics

CSS counters start with counter-reset to initialize a counter, and counter-increment is used to increase its value. The content property displays the counter in pseudo-elements like ::before.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Counters</title>
    <style>
        body {
            counter-reset: section;
        }
        h1::before {
            counter-increment: section;
            content: "Section " counter(section) ": ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Introduction</h1>
    <h1>Details</h1>
</body>
</html>

Explanation: The counter increments for each <h1> element and displays the current value in front of the heading.

Counters in Lists

Counters are commonly used in lists to create custom numbering or styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS List Counters</title>
    <style>
        ol {
            counter-reset: list-counter;
        }
        ol li {
            counter-increment: list-counter;
            list-style: none;
        }
        ol li::before {
            content: counter(list-counter) ". ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</body>
</html>

Explanation: This example creates custom numbering for list items using the counter property.

Nested Counters

CSS allows you to use nested counters for hierarchical numbering, such as 1.1, 1.2, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Nested Counters</title>
    <style>
        ol {
            counter-reset: list-counter;
        }
        ol li {
            counter-increment: list-counter;
            list-style: none;
        }
        ol li::before {
            content: counters(list-counter, ".") " ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ol>
        <li>Main Item 1
            <ol>
                <li>Sub Item 1.1</li>
                <li>Sub Item 1.2</li>
            </ol>
        </li>
        <li>Main Item 2</li>
    </ol>
</body>
</html>

Explanation: Nested counters allow you to manage numbering in hierarchical lists easily.

Key Takeaways

  • Counter Basics: Initialize counters with counter-reset and increment with counter-increment.
  • Lists: Use counters for custom numbering in ordered or unordered lists.
  • Nested Counters: Manage hierarchical numbering effectively with counters().
Prev Next