How to implement CSS counter
Brief explanations with code sample:
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
You can create an ordered list using any type of HTML.
counter-resetInitializes a counter, the value is the name of the counter. By default, the counter starts at 0. This property can also be used to change its value to any specific number.counter-incrementUsed in element that will be countable. Once counter-reset initialized, a counter's value can be increased or decreased.
counter(name, style) displays the value of a section counter. Generally used in a content property. This function can receive two parameters, the first as the name of the counter and the second one can be decimal or upper-roman (decimal by default).
counters(counter, string, style) displays the value of a section counter. Generally used in a content property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be decimal or upper-roman (decimal by default).
A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the
counters()function, separating text can be inserted between different levels of nested counters.
Code Sample:
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;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
Output:
Thanks for reading....
Happy Coding!