How Do CSS Counters Work?

/* Initialize counter */
.list {
  counter-reset: item;
}

/* Increment and display */
.list li::before {
  counter-increment: item;
  content: counter(item) ". ";
}

ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

/* Result: 1, 1.1, 1.2, 2, 2.1 */

li::before {
  content: counter(item, upper-roman); /* I, II, III */
  content: counter(item, lower-alpha); /* a, b, c */
  content: counter(item, decimal-leading-zero); /* 01, 02 */
}

body {
  counter-reset: chapter section;
}

h1::before {
  counter-increment: chapter;
  counter-reset: section;
  content: "Chapter " counter(chapter) ": ";
}

h2::before {
  counter-increment: section;
  content: counter(chapter) "." counter(section) " ";
}