CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed on a page using the counter() or counters() function of the content property.
Using counters
To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element “Section
<!DOCTYPE html> <html> <head> <style> body { /* Set the section counter to 0 */ counter-reset: section; } h3:before { /* Increment the section counter */ counter-increment: section; /* Display the counter */ content: "Section " counter( section) ": "; } </style> </head> <body> <h3>Introduction</h3> <h3>Body</h3> <h3>Conclusion</h3> </body> </html>