Hello readers, Today in my blog I will discuss about Counter-reset property used in CSS.
Introduction :-
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-:
Syntax :-
( [<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 :-<
!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS counter-reset property</title>
<style type="text/css">
body {
counter-reset: section;
}
h1 {
counter-reset: category;
}
h1:before {
counter-increment: section;
content: " " counter(section) ". ";
}
h2:before {
counter-increment: category;
content: counter(section) "." counter(category) " ";
}
</style>
</head>
<body>
<h1>Details</h1>
<h2>Name</h2>
<h2>Designation</h2>
<h1>Qualification</h1>
<h2>Graduate</h2>
<h2>Master Graduate</h2>
</body>
</html>
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.
0 Comment(s)