CSS CountersCSS counters are similar to variables. These are maintained by CSS and those values can be incremented by CSS rules to track how many times they are used. CSS counters facilitate simple CSS based incrementing and display of a number for generated content. CSS Counter PropertiesFollowing is a list of properties that are used with CSS counter:
Note: Before using a CSS counter, it must be created with counter-reset.CSS Counter ExampleLet's take an example to create a counter for a page and increment the counter value for each next element. See this example: Note: In the above example you can see that a counter is created for the page in the body selector and it increments the counter value for each element and adds "Section element.
|
You can also create counters within the counter. It is called nesting of a counter. Let's take an example to demonstrate nesting counter.
See this example: