Hello readers, Today in my blog I will discuss about Counter-reset property used in CSS.
The Counter-Reset property basically uses both the counter-increment and content properties of CSS.
The counter-increment property is used to create auto-incrementing counters within a web page while the content property helps us to display the counter values that has been generated.
The Syntax for Counter-Reset is given below-:
( [<user-ident> <integer>?]+ | none )
In the above syntax each element has its meaning where :-
- <user-ident> This identifies the name of the counter that you want to reset.
- <integer > The Integer uses the value to reset the counter.
- None keyword is used to disable the counter.
Below is an example showing the use of Counter-Reset Property, here is the code for it :-<
<title>Example of CSS counter-reset property</title>
content: " " counter(section) ". ";
content: counter(section) "." counter(category) " ";
Hence, the Counter-Reset property can be used for various purposes inside a web page.
Note :- The Counter-Reset property works on all modern browsers.