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: Test it NowNote: 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 <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element.CSS Nesting CountersYou 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: Test it NowNote: In the above example you can see that a counter is created for the section and another nesting counter named subsection is created within section.Different level of nesting countersYou can create outlined lists by using nesting counters. It facilitates you to insert a string between different levels of nested counters. See this example: Test it Now
Next TopicCSS clearfix
|