counter-reset : Counter Initialization Property

The counter-reset property creates or resets one or more CSS counters to a specified value. Counters are used with the content property and counter() or counters() functions to automatically number elements, create hierarchical numbering systems, and generate sequential content.

Usage

selector {
    counter-reset: counter-name;
}

The counter-reset property accepts counter names and optional initial values. Multiple counters can be reset in a single declaration.

Supported Values

Single Counter

counter-reset: chapter - Create/reset counter “chapter” to 0
counter-reset: chapter 1 - Create/reset counter “chapter” to 1
counter-reset: chapter 5 - Create/reset counter “chapter” to 5

Multiple Counters

counter-reset: chapter section - Reset both “chapter” and “section” to 0
counter-reset: chapter 1 section 0 - Reset “chapter” to 1 and “section” to 0
counter-reset: fig 1 table 1 equation 1 - Reset multiple counters with initial values

Special Keywords

none - Do not create or reset any counters (default)

Supported Elements

The counter-reset property applies to:

All HTML elements
All SVG elements
Particularly useful on container elements like <body>, <section>, <div>, <ol>, etc.

Notes

Default value is none (no counters are reset)
Counters are reset to 0 by default if no value is specified
Resetting a counter creates it if it doesn’t exist
Counter scope is determined by the element hierarchy
Child elements inherit counter values from parents
Resetting a counter in a child element creates a new scope for that counter
Essential for automatic numbering in documents, lists, figures, and tables
Works with counter-increment to create sequential numbering
Use with content: counter(name) to display counter values
Counters cascade through the document tree
Can create hierarchical numbering systems (1, 1.1, 1.2, 2, 2.1, etc.)
Reset occurs before any counter-increment on the same element

Data Binding

The counter-reset property works seamlessly with data binding to create dynamic numbering systems that respond to data-driven content. When combined with template loops, counters automatically number generated elements.

Example 1: Dynamic section numbering with data binding

<style>
    .document { counter-reset: section; }
    .section-heading {
        counter-increment: section;
        font-size: 20px;
        font-weight: bold;
        margin: 20px 0 10px;
    }
    .section-heading::before {
        content: "Section " counter(section) ": ";
        color: #3b82f6;
    }
</style>
<body>
    <div class="document">
        <template data-bind="">
            <h2 class="section-heading"></h2>
            <p><h1 id="counter-increment--counter-modification-property">counter-increment : Counter Modification Property</h1>

<p>The <code class="language-plaintext highlighter-rouge">counter-increment</code> property increases or decreases the value of one or more CSS counters. Counters are used with the <code class="language-plaintext highlighter-rouge">content</code> property and <code class="language-plaintext highlighter-rouge">counter()</code> or <code class="language-plaintext highlighter-rouge">counters()</code> functions to automatically number elements and create sequential content in documents.</p>

<h2 id="usage">Usage</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">selector</span> <span class="p">{</span>
    <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">counter-name</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>The counter-increment property accepts counter names and optional increment values. Multiple counters can be incremented in a single declaration.</p>

<hr />

<h2 id="supported-values">Supported Values</h2>

<h3 id="single-counter">Single Counter</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter</code> - Increment “chapter” by 1 (default)</li>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter 2</code> - Increment “chapter” by 2</li>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter -1</code> - Decrement “chapter” by 1</li>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter 0</code> - Don’t change “chapter” value</li>
</ul>

<h3 id="multiple-counters">Multiple Counters</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter section</code> - Increment both by 1</li>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter 1 section 1</code> - Increment both by 1</li>
  <li><code class="language-plaintext highlighter-rouge">counter-increment: chapter 2 section 1</code> - Increment “chapter” by 2, “section” by 1</li>
</ul>

<h3 id="special-keywords">Special Keywords</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">none</code> - Do not increment any counters (default)</li>
</ul>

<hr />

<h2 id="supported-elements">Supported Elements</h2>

<p>The <code class="language-plaintext highlighter-rouge">counter-increment</code> property applies to:</p>
<ul>
  <li>All HTML elements</li>
  <li>All SVG elements</li>
  <li>Commonly used on elements that need numbering (headings, list items, figures, etc.)</li>
</ul>

<hr />

<h2 id="notes">Notes</h2>

<ul>
  <li>Default value is <code class="language-plaintext highlighter-rouge">none</code> (no counters are incremented)</li>
  <li>Default increment value is 1 if not specified</li>
  <li>Increment occurs when the element is rendered</li>
  <li>Can increment by negative values to decrement</li>
  <li>Increment value of 0 effectively disables incrementing for that counter</li>
  <li>Counters must be initialized with <code class="language-plaintext highlighter-rouge">counter-reset</code> before incrementing</li>
  <li>Multiple elements can increment the same counter</li>
  <li>Increment happens after <code class="language-plaintext highlighter-rouge">counter-reset</code> on the same element</li>
  <li>Essential for automatic sequential numbering in documents</li>
  <li>Works with <code class="language-plaintext highlighter-rouge">content: counter(name)</code> to display counter values</li>
  <li>Can create complex hierarchical numbering systems</li>
  <li>Increment is cumulative across sibling elements</li>
  <li>Useful for lists, chapters, figures, tables, equations, and line numbers</li>
</ul>

<hr />

<h2 id="data-binding">Data Binding</h2>

<p>The <code class="language-plaintext highlighter-rouge">counter-increment</code> property automatically works with data-bound elements, incrementing counters for each generated item in template loops. This enables automatic sequential numbering of dynamic content.</p>

<h3 id="example-1-data-driven-numbered-list-with-automatic-incrementing">Example 1: Data-driven numbered list with automatic incrementing</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.numbered-container</span> <span class="p">{</span> <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">item</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.list-item</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">item</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">background</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.list-item</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">item</span><span class="p">,</span> <span class="nb">decimal-leading-zero</span><span class="p">);</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
        <span class="nl">margin-right</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"numbered-container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/template&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-2-dynamic-faq-with-question-numbering">Example 2: Dynamic FAQ with question numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.faq-section</span> <span class="p">{</span> <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">question</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.faq-item</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">question</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">25px</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
        <span class="nl">background</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.question-text</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Q"</span> <span class="n">counter</span><span class="p">(</span><span class="n">question</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.answer-text</span> <span class="p">{</span>
        <span class="nl">margin-top</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
        <span class="nl">padding-left</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"faq-section"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"faq-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"question-text"</span><span class="nt">&gt;&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"answer-text"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/template&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-3-multi-category-lists-with-separate-counters">Example 3: Multi-category lists with separate counters</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.content-area</span> <span class="p">{</span> <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">figure</span> <span class="n">table</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.figure-item</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">figure</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">15px</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.figure-item</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Figure "</span> <span class="n">counter</span><span class="p">(</span><span class="n">figure</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-item</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">15px</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-item</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Table "</span> <span class="n">counter</span><span class="p">(</span><span class="n">table</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-area"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"figure-item"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/template&gt;</span>
        <span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"table-item"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/template&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-basic-heading-numbering">Example 1: Basic heading numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">body</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">heading</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">heading</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">heading</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Introduction<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Background<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Methodology<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Results<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-2-nested-section-numbering">Example 2: Nested section numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">body</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">section</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">subsection</span><span class="p">;</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">section</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">section</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h3</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">subsection</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h3</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">section</span><span class="p">)</span> <span class="s1">"."</span> <span class="n">counter</span><span class="p">(</span><span class="n">subsection</span><span class="p">)</span> <span class="s1">" "</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h2&gt;</span>First Section<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Subsection A<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Subsection B<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Second Section<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Subsection A<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-3-figure-numbering">Example 3: Figure numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">body</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">figure</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">figure</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">figure</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">figcaption</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Figure "</span> <span class="n">counter</span><span class="p">(</span><span class="n">figure</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;figure&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"chart1.png"</span> <span class="na">alt=</span><span class="s">"Sales Chart"</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;figcaption&gt;</span>Quarterly Sales Data<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/figure&gt;</span>
    <span class="nt">&lt;figure&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"chart2.png"</span> <span class="na">alt=</span><span class="s">"Growth Chart"</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;figcaption&gt;</span>Year-over-Year Growth<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/figure&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-4-custom-list-with-increment-by-2">Example 4: Custom list with increment by 2</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.even-list</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">item</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.even-list</span> <span class="nt">li</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">item</span> <span class="m">2</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.even-list</span> <span class="nt">li</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">item</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"even-list"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li&gt;</span>First item (2)<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Second item (4)<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Third item (6)<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Fourth item (8)<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-5-countdown-list-with-negative-increment">Example 5: Countdown list with negative increment</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.countdown</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">count</span> <span class="m">10</span><span class="p">;</span>
        <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.countdown</span> <span class="nt">li</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">count</span> <span class="m">-1</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.countdown</span> <span class="nt">li</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">count</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#ef4444</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.2em</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"countdown"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li&gt;</span>Tenth item<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Ninth item<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Eighth item<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Seventh item<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Sixth item<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-6-table-and-equation-numbering">Example 6: Table and equation numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">article</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">table</span> <span class="n">equation</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-caption</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-caption</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Table "</span> <span class="n">counter</span><span class="p">(</span><span class="n">table</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.equation</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">equation</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.equation</span><span class="nd">::after</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"("</span> <span class="n">counter</span><span class="p">(</span><span class="n">equation</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span>
        <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;article&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"table-caption"</span><span class="nt">&gt;</span>Sales Results<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"equation"</span><span class="nt">&gt;</span>E = mc²<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"table-caption"</span><span class="nt">&gt;</span>Revenue Breakdown<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"equation"</span><span class="nt">&gt;</span>F = ma<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-7-line-numbering-in-code-block">Example 7: Line numbering in code block</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.code-block</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">line</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.code-line</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">line</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.code-line</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">line</span><span class="p">,</span> <span class="nb">decimal-leading-zero</span><span class="p">)</span> <span class="s1">" "</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
        <span class="nl">margin-right</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;pre</span> <span class="na">class=</span><span class="s">"code-block"</span><span class="nt">&gt;</span>
<span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"code-line"</span><span class="nt">&gt;</span>function hello() {<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"code-line"</span><span class="nt">&gt;</span>    console.log("Hello");<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"code-line"</span><span class="nt">&gt;</span>}<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"code-line"</span><span class="nt">&gt;</span>hello();<span class="nt">&lt;/code&gt;</span>
    <span class="nt">&lt;/pre&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-8-footnote-references">Example 8: Footnote references</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">article</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">footnote</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.footnote</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">footnote</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.footnote</span><span class="nd">::after</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"["</span> <span class="n">counter</span><span class="p">(</span><span class="n">footnote</span><span class="p">)</span> <span class="s1">"]"</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">super</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.75em</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;article&gt;</span>
        <span class="nt">&lt;p&gt;</span>This statement<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"footnote"</span><span class="nt">&gt;&lt;/span&gt;</span> requires citation.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>Another fact<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"footnote"</span><span class="nt">&gt;&lt;/span&gt;</span> needs a reference.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>Final point<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"footnote"</span><span class="nt">&gt;&lt;/span&gt;</span> with source.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-9-multi-level-outline-numbering">Example 9: Multi-level outline numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.outline</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">level1</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level1</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">level1</span><span class="p">;</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">level2</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level1</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">level1</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level2</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">level2</span><span class="p">;</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">level3</span><span class="p">;</span>
        <span class="nl">margin-left</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level2</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">level1</span><span class="p">)</span> <span class="s1">"."</span> <span class="n">counter</span><span class="p">(</span><span class="n">level2</span><span class="p">)</span> <span class="s1">" "</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level3</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">level3</span><span class="p">;</span>
        <span class="nl">margin-left</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.level3</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">level1</span><span class="p">)</span> <span class="s1">"."</span> <span class="n">counter</span><span class="p">(</span><span class="n">level2</span><span class="p">)</span> <span class="s1">"."</span> <span class="n">counter</span><span class="p">(</span><span class="n">level3</span><span class="p">)</span> <span class="s1">" "</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"outline"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level1"</span><span class="nt">&gt;</span>Chapter One<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level2"</span><span class="nt">&gt;</span>Section A<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level3"</span><span class="nt">&gt;</span>Subsection i<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level3"</span><span class="nt">&gt;</span>Subsection ii<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level2"</span><span class="nt">&gt;</span>Section B<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level1"</span><span class="nt">&gt;</span>Chapter Two<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"level2"</span><span class="nt">&gt;</span>Section A<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-10-step-by-step-tutorial">Example 10: Step-by-step tutorial</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.tutorial</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">step</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.step</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">step</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
        <span class="nl">padding-left</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.step</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">step</span><span class="p">);</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
        <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">35px</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">35px</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
        <span class="nl">background</span><span class="p">:</span> <span class="m">#10b981</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
        <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
        <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tutorial"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;</span>Download the installer<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;</span>Run the setup wizard<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;</span>Configure settings<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;</span>Complete installation<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-11-quiz-questions-with-automatic-numbering">Example 11: Quiz questions with automatic numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.quiz</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">question</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.question</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">question</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.question</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Question "</span> <span class="n">counter</span><span class="p">(</span><span class="n">question</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"quiz"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">&gt;</span>What is CSS?<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">&gt;</span>What does HTML stand for?<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">&gt;</span>Name three JavaScript frameworks.<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-12-article-with-multiple-counter-types">Example 12: Article with multiple counter types</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">article</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">heading</span> <span class="n">figure</span> <span class="n">table</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">heading</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">h2</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">heading</span><span class="p">)</span> <span class="s1">". "</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">figure</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">figure</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nt">figcaption</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Figure "</span> <span class="n">counter</span><span class="p">(</span><span class="n">figure</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-title</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.table-title</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Table "</span> <span class="n">counter</span><span class="p">(</span><span class="n">table</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;article&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Introduction<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;figure&gt;</span>
            <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"intro.png"</span> <span class="na">alt=</span><span class="s">"Introduction"</span><span class="nt">/&gt;</span>
            <span class="nt">&lt;figcaption&gt;</span>Overview diagram<span class="nt">&lt;/figcaption&gt;</span>
        <span class="nt">&lt;/figure&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Data Analysis<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"table-title"</span><span class="nt">&gt;</span>Sales Data<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;figure&gt;</span>
            <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"chart.png"</span> <span class="na">alt=</span><span class="s">"Chart"</span><span class="nt">/&gt;</span>
            <span class="nt">&lt;figcaption&gt;</span>Sales trend<span class="nt">&lt;/figcaption&gt;</span>
        <span class="nt">&lt;/figure&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-13-agenda-items-with-custom-increment">Example 13: Agenda items with custom increment</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.agenda</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">item</span> <span class="m">0</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.agenda-item</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">item</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
        <span class="nl">border-left</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.agenda-item</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">item</span><span class="p">,</span> <span class="nb">decimal-leading-zero</span><span class="p">)</span> <span class="s1">":00 - "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item"</span><span class="nt">&gt;</span>Opening Remarks<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item"</span><span class="nt">&gt;</span>Keynote Presentation<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item"</span><span class="nt">&gt;</span>Panel Discussion<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item"</span><span class="nt">&gt;</span>Q<span class="err">&amp;</span>A Session<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-14-legal-clauses-with-roman-numerals">Example 14: Legal clauses with Roman numerals</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.contract</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">article</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.article</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">article</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.article</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Article "</span> <span class="n">counter</span><span class="p">(</span><span class="n">article</span><span class="p">,</span> <span class="nb">upper-roman</span><span class="p">)</span> <span class="s1">": "</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"contract"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article"</span><span class="nt">&gt;</span>Definitions and Interpretation<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article"</span><span class="nt">&gt;</span>Obligations of the Parties<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article"</span><span class="nt">&gt;</span>Term and Termination<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article"</span><span class="nt">&gt;</span>Miscellaneous Provisions<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-15-chapter-and-page-numbering">Example 15: Chapter and page numbering</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nt">body</span> <span class="p">{</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">chapter</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.chapter</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">chapter</span><span class="p">;</span>
        <span class="nl">counter-reset</span><span class="p">:</span> <span class="n">page</span><span class="p">;</span>
        <span class="nl">page-break-before</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.chapter</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"Chapter "</span> <span class="n">counter</span><span class="p">(</span><span class="n">chapter</span><span class="p">);</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">28px</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.page</span> <span class="p">{</span>
        <span class="nl">counter-increment</span><span class="p">:</span> <span class="n">page</span><span class="p">;</span>
        <span class="nl">min-height</span><span class="p">:</span> <span class="m">500px</span><span class="p">;</span>
        <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.page</span><span class="nd">::after</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="n">counter</span><span class="p">(</span><span class="n">chapter</span><span class="p">)</span> <span class="s1">"-"</span> <span class="n">counter</span><span class="p">(</span><span class="n">page</span><span class="p">);</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
        <span class="nl">bottom</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
        <span class="nl">right</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chapter"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page"</span><span class="nt">&gt;</span>Chapter content page 1...<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page"</span><span class="nt">&gt;</span>Chapter content page 2...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chapter"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page"</span><span class="nt">&gt;</span>Chapter content page 1...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/cssproperties/css_prop_counter-reset">counter-reset</a> - Initialize counters</li>
  <li><a href="/reference/cssproperties/css_prop_content">content</a> - Generated content with counters</li>
  <li><a href="/reference/cssproperties/css_prop_list-style-type">list-style-type</a> - List marker style</li>
  <li><a href="/reference/cssproperties/css_prop_display">display</a> - Element display type</li>
  <li><a href="/reference/htmlattributes/style">style attribute</a> - Inline CSS styles</li>
</ul>

<hr />
</p>
        </template>
    </div>
</body>

Example 2: Multi-level outline with data-driven content

<style>
    .outline { counter-reset: chapter; }
    .chapter {
        counter-reset: topic;
        counter-increment: chapter;
        margin: 20px 0;
    }
    .chapter-title::before {
        content: counter(chapter) ". ";
        font-weight: bold;
        color: #1f2937;
    }
    .topic {
        counter-increment: topic;
        margin-left: 30px;
        margin: 10px 0 10px 30px;
    }
    .topic::before {
        content: counter(chapter) "." counter(topic) " ";
        color: #6b7280;
    }
</style>
<body>
    <div class="outline">
        <template data-bind="">
            <div class="chapter">
                <h2 class="chapter-title"></h2>
                <template data-bind="">
                    <div class="topic"></div>
                </template>
            </div>
        </template>
    </div>
</body>

Example 3: Data-driven task list with automatic numbering

<style>
    .task-list { counter-reset: task; }
    .task-item {
        counter-increment: task;
        padding: 12px;
        margin: 8px 0;
        background: #f9fafb;
        border-left: 3px solid #3b82f6;
        border-radius: 4px;
    }
    .task-item::before {
        content: "Task " counter(task) ": ";
        font-weight: bold;
        color: #3b82f6;
        margin-right: 8px;
    }
</style>
<body>
    <div class="task-list">
        <template data-bind="">
            <div class="task-item"></div>
        </template>
    </div>
</body>

Examples

Example 1: Basic chapter numbering

<style>
    body {
        counter-reset: chapter;
    }
    h1::before {
        counter-increment: chapter;
        content: "Chapter " counter(chapter) ": ";
    }
</style>
<body>
    <h1>Introduction</h1>
    <h1>Getting Started</h1>
    <h1>Advanced Topics</h1>
</body>

Example 2: Nested section numbering

<style>
    body {
        counter-reset: section;
    }
    h2 {
        counter-reset: subsection;
    }
    h2::before {
        counter-increment: section;
        content: counter(section) ". ";
    }
    h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
    }
</style>
<body>
    <h2>First Section</h2>
    <h3>Subsection One</h3>
    <h3>Subsection Two</h3>
    <h2>Second Section</h2>
    <h3>Subsection One</h3>
</body>

Example 3: Figure numbering starting at 1

<style>
    body {
        counter-reset: figure 0;
    }
    figcaption::before {
        counter-increment: figure;
        content: "Figure " counter(figure) ": ";
        font-weight: bold;
    }
</style>
<body>
    <figure>
        <img src="chart.png" alt="Chart"/>
        <figcaption>Sales Data</figcaption>
    </figure>
    <figure>
        <img src="graph.png" alt="Graph"/>
        <figcaption>Growth Trends</figcaption>
    </figure>
</body>

Example 4: Multiple independent counters

<style>
    article {
        counter-reset: figure 0 table 0 equation 0;
    }
    .figure::before {
        counter-increment: figure;
        content: "Fig. " counter(figure) " - ";
    }
    .table::before {
        counter-increment: table;
        content: "Table " counter(table) " - ";
    }
    .equation::before {
        counter-increment: equation;
        content: "Eq. " counter(equation) " - ";
    }
</style>
<body>
    <article>
        <p class="figure">Revenue Chart</p>
        <p class="table">Quarterly Results</p>
        <p class="equation">E = mc²</p>
        <p class="figure">Growth Graph</p>
        <p class="table">Annual Summary</p>
    </article>
</body>

Example 5: Custom list with reset

<style>
    .custom-list {
        counter-reset: item;
        list-style: none;
    }
    .custom-list li::before {
        counter-increment: item;
        content: counter(item) ". ";
        font-weight: bold;
        color: #3b82f6;
    }
</style>
<body>
    <ul class="custom-list">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>

Example 6: Resetting counters in nested sections

<style>
    body {
        counter-reset: chapter;
    }
    .chapter {
        counter-reset: page 1;
    }
    .chapter::before {
        counter-increment: chapter;
        content: "Chapter " counter(chapter);
        display: block;
        font-size: 24px;
        font-weight: bold;
    }
    .page::before {
        counter-increment: page;
        content: "Page " counter(chapter) "-" counter(page);
    }
</style>
<body>
    <div class="chapter">
        <p class="page">Content...</p>
        <p class="page">Content...</p>
    </div>
    <div class="chapter">
        <p class="page">Content...</p>
        <p class="page">Content...</p>
    </div>
</body>

Example 7: Table row numbering

<style>
    table {
        counter-reset: row;
    }
    tbody tr::before {
        counter-increment: row;
        content: counter(row);
        display: table-cell;
        padding: 8px;
        font-weight: bold;
        background: #f3f4f6;
    }
</style>
<body>
    <table>
        <tbody>
            <tr>
                <td>Item A</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Item B</td>
                <td>$200</td>
            </tr>
            <tr>
                <td>Item C</td>
                <td>$150</td>
            </tr>
        </tbody>
    </table>
</body>

Example 8: Footnote numbering

<style>
    article {
        counter-reset: footnote;
    }
    .footnote-ref {
        counter-increment: footnote;
    }
    .footnote-ref::after {
        content: "[" counter(footnote) "]";
        vertical-align: super;
        font-size: 0.75em;
        color: #3b82f6;
    }
</style>
<body>
    <article>
        <p>This statement requires citation<span class="footnote-ref"></span>.</p>
        <p>Another reference here<span class="footnote-ref"></span>.</p>
    </article>
</body>

Example 9: Step-by-step instructions

<style>
    .instructions {
        counter-reset: step;
    }
    .step::before {
        counter-increment: step;
        content: "Step " counter(step) ": ";
        font-weight: bold;
        color: #10b981;
        display: block;
        margin-bottom: 8px;
    }
</style>
<body>
    <div class="instructions">
        <div class="step">Open the application</div>
        <div class="step">Click on Settings</div>
        <div class="step">Configure your preferences</div>
        <div class="step">Save and exit</div>
    </div>
</body>

Example 10: FAQ numbering

<style>
    .faq {
        counter-reset: question;
    }
    .question::before {
        counter-increment: question;
        content: "Q" counter(question) ": ";
        font-weight: bold;
        color: #3b82f6;
    }
</style>
<body>
    <div class="faq">
        <p class="question">What is CSS?</p>
        <p>CSS stands for Cascading Style Sheets.</p>

        <p class="question">How do counters work?</p>
        <p>Counters are incremented and displayed using CSS properties.</p>

        <p class="question">Can I nest counters?</p>
        <p>Yes, counters can be nested for hierarchical numbering.</p>
    </div>
</body>

Example 11: Multi-level outline

<style>
    .outline {
        counter-reset: level1;
    }
    .level1 {
        counter-increment: level1;
        counter-reset: level2;
    }
    .level1::before {
        content: counter(level1) ". ";
        font-weight: bold;
    }
    .level2 {
        counter-increment: level2;
        margin-left: 30px;
    }
    .level2::before {
        content: counter(level1) "." counter(level2) " ";
    }
</style>
<body>
    <div class="outline">
        <div class="level1">Introduction</div>
        <div class="level2">Overview</div>
        <div class="level2">Objectives</div>
        <div class="level1">Main Content</div>
        <div class="level2">Section A</div>
        <div class="level2">Section B</div>
    </div>
</body>

Example 12: Appendix numbering with letters

<style>
    body {
        counter-reset: appendix;
    }
    .appendix::before {
        counter-increment: appendix;
        content: "Appendix " counter(appendix, upper-alpha) ": ";
        font-weight: bold;
    }
</style>
<body>
    <h2 class="appendix">Additional Resources</h2>
    <h2 class="appendix">Glossary</h2>
    <h2 class="appendix">References</h2>
</body>

Example 13: Recipe steps with custom numbering

<style>
    .recipe {
        counter-reset: step 0;
    }
    .recipe-step {
        counter-increment: step;
        padding-left: 60px;
        position: relative;
        margin-bottom: 20px;
    }
    .recipe-step::before {
        content: counter(step);
        position: absolute;
        left: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #3b82f6;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
</style>
<body>
    <div class="recipe">
        <div class="recipe-step">Preheat oven to 350°F</div>
        <div class="recipe-step">Mix dry ingredients</div>
        <div class="recipe-step">Add wet ingredients</div>
        <div class="recipe-step">Bake for 30 minutes</div>
    </div>
</body>

Example 14: Legal document numbering

<style>
    .contract {
        counter-reset: clause;
    }
    .clause {
        counter-reset: subclause;
    }
    .clause::before {
        counter-increment: clause;
        content: counter(clause) ". ";
        font-weight: bold;
    }
    .subclause {
        margin-left: 30px;
    }
    .subclause::before {
        counter-increment: subclause;
        content: counter(clause) "." counter(subclause) " ";
    }
</style>
<body>
    <div class="contract">
        <p class="clause">Definitions</p>
        <p class="subclause">Term shall mean...</p>
        <p class="subclause">Party shall mean...</p>
        <p class="clause">Obligations</p>
        <p class="subclause">The first party agrees...</p>
        <p class="subclause">The second party agrees...</p>
    </div>
</body>

Example 15: Course curriculum with module and lesson numbers

<style>
    .curriculum {
        counter-reset: module;
    }
    .module {
        counter-reset: lesson;
    }
    .module-title::before {
        counter-increment: module;
        content: "Module " counter(module) ": ";
        font-weight: bold;
        color: #3b82f6;
    }
    .lesson::before {
        counter-increment: lesson;
        content: counter(module) "." counter(lesson) " ";
        color: #6b7280;
    }
</style>
<body>
    <div class="curriculum">
        <div class="module">
            <h2 class="module-title">Fundamentals</h2>
            <p class="lesson">Introduction to Programming</p>
            <p class="lesson">Variables and Data Types</p>
            <p class="lesson">Control Structures</p>
        </div>
        <div class="module">
            <h2 class="module-title">Advanced Topics</h2>
            <p class="lesson">Object-Oriented Programming</p>
            <p class="lesson">Design Patterns</p>
        </div>
    </div>
</body>