CSS - counter()
The CSS counter() function gives you a string displaying the current value of a named counter. Usually, it's employed in the content property of pseudo-elements.
Possible Values
<counter-name> − This is a unique name for the counters that must exactly match the case as used in counter-reset and counter-increment. The name must not begin with two hyphens and cannot be none, unset, initial, or inherit.
<counter-style> − This is Optional. The style of the counter (can be a list-style-type value or @counter-style value or symbols() function.). The name of a counting style can be simple, such as numeric, alphabetic, or symbolic etc.
Syntax
counter(<countername>, <counterstyle>)
CSS counter() - Basic Example
Here is an example that demonstrates counter() function.
<html> <head> <style> .demo-counter { counter-reset: item-counter; } .demo-counter li { list-style-type: none; counter-increment: item-counter; } .demo-counter li::before { content: counter(item-counter) ". "; } </style> </head> <body> <ul class="demo-counter"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> <li>Fifth item</li> </ul> </body> </html>
CSS counter() - Using Two Styles.
This program demonstrates the usage of the counter() function with two different counter styles.
<html> <head> <style> ul { counter-reset: demo-counter; list-style: none; margin: 10px; padding: 10px; } li { counter-increment: demo-counter; margin-bottom: 1em; } li::before { content: "[" counter(demo-counter) "] "; font-weight: bold; color: #3498db; } li::after { content: " (Level " counter(demo-counter, lower-roman) ")"; font-style: italic; color: #e74c3c; } </style> </head> <body> <ul> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>And this is fifth and last item</li> </ul> </body> </html>
To Continue Learning Please Login