how to use counter property of “ol” element

What’s “counter-reset”?

• The “counter-reset” property resets a counter to a given value and the counter's value is increased or decreased using the “counter-increment” CSS property

What’s “counter-increment”?

• The counter-increment CSS property increases or decreases the value of a CSS counter  by a given value.

What’s “counter”?

• The ”counter()” css function returns a string representing the current value of the named counter.

Example

ol {
  display:flex;
  padding:0;
  counter-reset:order 0;
}

li {
  list-style-type:none;
}


ol li::before {
  counter-increment:order 1;
  content:counter(order);
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--circle-width);
  aspect-ratio:1/1;
  border-radius:50%;
  border:var(--circle-border-width) solid black;
  font-size:var(--circle-font-size);
  margin:0 auto var(--circle-bottom-margin) auto;
  background-color:white;
}