CSS Counters

CSS 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 Properties

Following is a list of properties that are used with CSS counter:

  • counter-reset: It is used to create or reset a counter.
  • counter-increment: It is used to increment the counter value.
  • content: It is used to insert generated content.
  • counter() or counters() function: It is used to add the value of a counter to an element.
    <!DOCTYPE html>  
    <html>      
    <head>  
    <style>  
    body {  
        counter-reset: section;  
    }  
    h2::before {  
        counter-increment: section;  
        content: "Section " counter(section) ": ";  
    }  
    </style>  
    </head>  
    <body>  
    <h1>Example of CSS Counters:</h1>  
    <h2>Java Tutorial</h2>  
    <h2>HTML Tutorial</h2>  
    <h2>CSS Tutorial</h2>  
    <h2>Oracle Tutorial</h2>  
    <p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>  
    </body>  
    </html>  

Was this article helpful?

Related Articles

Leave A Comment?