Using CSS counters

Posted on
  1. You are in : Cascading Style Sheets  >>  CSS Reference (c to f)  >>  

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>