CSS Counters - Detailed Overview

Introduction to CSS Counters

CSS counters allow you to create custom numbering schemes for lists and other elements. Counters can be incremented and reset, and used to style elements dynamically.

Examples of CSS Counters

Below are examples of how to use CSS counters to create custom list numbering:

ol {
    list-style: none;
    counter-reset: item;
    padding-left: 0;
}

li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

li::before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
}

ol.custom-counter {
    counter-reset: section;
}

ol.custom-counter > li {
    counter-increment: section;
}

ol.custom-counter > li::before {
    content: "Section " counter(section) ": ";
    color: #007bff;
    font-weight: bold;
}

.custom-list {
    counter-reset: list;
}

.custom-list li {
    counter-increment: list;
}

.custom-list li::before {
    content: "Item " counter(list) " ";
    color: #28a745;
    font-weight: bold;
}