How to implement the counter-reset Property in CSS ?

The counter-reset property in CSS is used to reset or initialize the value of a CSS counter. Counters are used with the counter-increment property and the counter() function to create automatic numbering for elements.

Syntax:

/* Resetting the value of the 'chapter' counter to 1 */
body {
  counter-reset: chapter 1;
}

Features:

• Counter Initialization: counter-reset initializes the value of a counter to a specified number.
• Usage with Counters: Typically used in conjunction with the counter-increment property and the counter() function to automatically number elements.
• Multiple Counters: You can reset multiple counters in a single rule.

The counter-reset property is useful in scenarios where you want to restart the counting of elements, like chapters or sections, in a document.