Do you know how to do automatic numbering with a CSS counter?

As you may already know, when we add lists with the <ol> element, the list is automatically numbered. Using CSS Counter, we can number any element. So, let's see how this is done.

The CSS counter consists of two main properties: counter-reset andcounter-increment. The counter-reset is used to reset the count, while the counter-increment - together with the pseudo-element - is used to add the numbers.

body {
  counter-reset: number;
}

h1:before {
  counter-increment: number;
  content: "counter(number) ";
}

In addition, you can also change the type of the number specified in the content property. For example Roman numbers.

h2:before {
  counter-increment: first;
  content: counter(number, upper-roman) ". ";
}

This property can only be useful for a specific type of website and you are unlikely to use it every day.