StacksJar
Made with π by Arif Shaikh with all Passion.
Counters in Css
Counter in Css
Css Counters are variables maintained by Css and are incremented or decremented by CSS rules which track how many times they're used. We can define our own custom counters, and can also change the list-item counter. List-Item counter is an default counter provided by Css for all ordered lists. In this post we are going to check counters in Css.
You can read more about Css Counters in this MDN article
Creates a custom list counter that accounts for nested list elements.
- Use
counter-resetto initialise a variable counter (default0), the name of which is the value of the attribute (i.e.counter). - Use
counter-incrementon the variable counter for each countable element (i.e. each<li>). - Use
counters()to display the value of each variable counter as part of thecontentof the::beforepseudo-element for each countable element (i.e. each<li>). The second value passed to it ('.') acts as the delimiter for nested counters.
//Html
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
//Css
ul {
counter-reset: counter;
list-style: none;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
You can also check below posts for Css Counter
How to Set Counter in Css
Hope you liked this post.
Happy Coding!
