StacksJar
Made with π by Arif Shaikh with all Passion.
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.
counter-reset
to initialise a variable counter (default 0
), the name of which is the value of the attribute (i.e. counter
).counter-increment
on the variable counter for each countable element (i.e. each <li>
).counters()
to display the value of each variable counter as part of the content
of the ::before
pseudo-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
Hope you liked this post.
Happy Coding!