CSS counter-increment Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.document {
    counter-reset: section;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    max-width: 700px;
    margin: 20px;
}

.section {
    counter-increment: section;
    counter-reset: subsection;
    margin: 1em 0;
}

.section > h2::before {
    content: "Section " counter(section) ": ";
    font-weight: 700;
    margin-right: 0.4em;
}

.subsection {
    counter-increment: subsection;
    margin: 0.6em 0;
}

.subsection > h3::before {
    content: counter(section) "." counter(subsection) " ";
    color: #333;
    font-weight: 600;
    margin-right: 0.3em;
}

ul.counter-list {
    counter-reset: item;
    padding-left: 0;
    margin: 0.5em 0 0 1.4em;
}

ul.counter-list li {
    list-style: none;
    counter-increment: item;
    margin: 0.25em 0;
}

ul.counter-list li::before {
    content: counter(item) ". ";
    color: #0a58ca;
    font-weight: 700;
    margin-right: 0.35em;
}
</style></head><body><div class="document">
    <div class="section">
        <h2>Introduction</h2>
        <p>Some intro text.</p>
        <div class="subsection">
            <h3>Background</h3>
            <p>Background text.</p>
        </div>
        <div class="subsection">
            <h3>Goals</h3>
            <p>Goals text.</p>
        </div>
    </div>

    <div class="section">
        <h2>Features</h2>
        <p>Features overview.</p>
        <div class="subsection">
            <h3>Primary</h3>
            <ul class="counter-list">
                <li>Easy to use</li>
                <li>Customizable</li>
                <li>Accessible</li>
            </ul>
        </div>
        <div class="subsection">
            <h3>Secondary</h3>
            <p>Other features.</p>
        </div>
    </div>
</div></body></html>