CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. MDN

Example :-

CSS:-

body {
  counter-reset: section;
}
p:before {
  counter-increment: area; 
  content: "Area" counter(area) " - ";
}

HTML :-

<p> counters </p>
<p> counters </p>
<p> counters </p>

Output:-

Nested counters

A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the counters() function, a string can be inserted between different levels of nested counters. MDN

Example:-

CSS:-

ul {
  counter-reset: area;
  list-style-type: none;
}
li:before {
  counter-increment: area;
  content: counters(area,".") " ";
}

HTML :-

<ul>
  <li>item</li>         
  <li>item              
    <ul>
      <li>item</li>     
      <li>item</li>     
      <li>item          
        <ul>
          <li>item</li> 
          <li>item</li> 
        </ul>
        <ul>
          <li>item</li> 
          <li>item</li> 
          <li>item</li> 
        </ul>
      </li>
      <li>item</li>     
    </ul>
  </li>
  <li>item</li>         
</ul>

Output:-