How to implement the counter-reset Property in CSS ?
Last Updated :
01 Feb, 2024
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.
Share your thoughts in the comments
Please Login to comment...