Using CSS counters

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>
            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) ": ";