The counter() function returns the current value of the named counter as a string. In the following we are creating a counter named “chapter”.

/* uses basic numbers as the counter number */
body {
    counter-reset: chapter;
}
h2::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter) ": ";
}

/* uses Roman numberals as the counter number */
body {
    counter-reset: chapter;
  }
h2::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter, upper-roman) ": ";
}

In the following example, we have the three titles set, each starting with “Monkeys…”. We use the first CSS example above to add the chapter numbers dymamically.

Chapter 1: Chickens are Cute

Chapter 2: Chickens have Feathers

Chapter 3: Chickens Cross the Road

counter(countername, counterstyle)

Value	Description
countername	The name of the counter, which is the same name used for the counter-reset and counter-increment properties (required)
counterstyle	The style of the counter. For example: decimal (default) decimal-leading-zero lower-roman upper-roman lower-latin upper-latin

---