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-reset to initialise a variable counter (default 0), the name of which is the value of the attribute (i.e. counter).
  • Use counter-increment on the variable counter for each countable element (i.e. each <li>).
  • Use 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

How to Set Counter in Css

Hope you liked this post.

Happy Coding!

πŸ”₯ 10 Views
Dec 7, 2022