Counters

CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used). To work with CSS counters we will use the following properties:

• counter-reset Creates or resets a counter.
• counter-increment Increments a counter value.
• content - Inserts a Generated Content.
• counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element:

body{
	counter-reset: section;
}
h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

Nesting Counters

body{
  counter-reset : sectionfirst subheading;
}
h1::before{
  counter-increment: sectionfirst;
  content: "Chapter " counter(sectionfirst) " : ";
  counter-reset : subheading;
}
h1{
  counter-reset : subheading;
}
h3::before{
  counter-increment : subheading;
  content : "Chapter : " counter(sectionfirst) " Section " counter(subheading) " : "
}

<div class='box'>

  <h1>Heading One</h1>
  <h3>Subheading One</h3>
  <h3>Subheading Two</h3>

  <h1>Heading Two</h1>
  <h3>Subheading One</h3>
  <h3>Subheading Two</h3>
  <h3>Subheading Three</h3>
  <h3>Subheading Four</h3>

  <h1>Heading Three</h1>
  <h3>Subheading One</h3>
  <h3>Subheading Two</h3>

</div>

As you can see, if you want to use multiple counter, seperate each counter with a space in the counter-reset property. If you want to reset the counter to start counting from the beginning again, use counter-reset property in the element. While rendering the webpage, when the element comes from the top, the counter will be reset and start counting from 1 again.