CSS counter-reset

The counter-reset CSS property creates or resets one or more counters. A counter is a self-incrementing number which can be used to label items or generate automatic numbering.

Here's how you can use the counter-reset property in your CSS:

Result:


    <style>
      /* Resetting the counter to 0 */
      .example {
        counter-reset: section;
      }

      /* Using the counter value */
      .example::before {
        counter-increment: section;
        content: "Section " counter(section) ": ";
      }
    </style>
    
    <div class="example">
      <p>Sample text in section 1.</p>
      <p>Another sample text in section 2.</p>
    </div>

In this example, we have a .example class which resets the counter named section to 0. We then increment the counter for each instance of the .example class and display the value before the content of each element.

For more complex examples and usage of counter-reset, refer to the MDN documentation.