Open In App

How to set the content as a counter ?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to set content as a counter. The CSS counters area unit “variables” maintained by CSS whose values are also incremented by CSS rules (to track what variety of times they are used). Counters permit you to manage the appearance of content supported by its placement among the document.

Way to set content as Counters:

CSS counters area units like “variables”. The variable values may be incremented by CSS rules (which can track what percentage times they’re used). To use a CSS counter, it should 1st be created with a counter-reset and to work with CSS counters we’ll use the subsequent properties:

  • counter-reset: Creates or resets a counter
  • counter-increment: Increments a counter value
  • content: Inserts generated content
  • counter() or counters() function: Adds the value of a counter to a component

Counters under Counter (Nesting Counters): 

A counter may be helpful to form printed lists as a result of a replacement instance of a counter is mechanically created in child parts. 

Example 1: Here we tend to use the counters() perform to insert a string between completely different levels of nested counters:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        /* It sets the CSS property to the webpage */
          
        ol {
            counter-reset: section;
            /* Creates or resets a counter */
            list-style-type: none;
            /* Sets the marker of a list 
               item element to be none */
        }
          
        li::before {
            counter-increment: section;
            /* Increments a counter value */
            content: "Part " counters(section, ".") " ";
            /* Inserts generated content */
        }
    </style>
</head>
  
<body>
  
    <ol>
        <li>GFG Supreme</li><br>
        <li>GFG Extreme
            <ol>
                <br>
                <li>Superb</li><br>
                <li>Marvellous</li><br>
                <li>Mind Blowing
                    <ol>
                        <br>
                        <li>Success</li><br>
                        <li>Extraordinary</li><br>
                        <li>Excellent</li>
                    </ol>
                </li><br>
                <li>Fabulous</li>
            </ol>
        </li><br>
        <li>GFG Stream</li><br>
        <li>GFG Marine</li>
    </ol>
</body>
  
</html>


Output:

Example 2: This is an example of setting up a counter, here the value of the counter increases its value with one and connects it with the starting of each part:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2::before {
            color: red;
            counter-increment: section;
            content: "Part " counter(section) ": ";
            /* Inserts generated content */
        }
          
        h2 {
            color: green;
        }
          
        h1 {
            color: blue;
        }
    </style>
</head>
  
<body style="counter-reset: section;text-align:center">
    <!--Creates or resets a counter-->
  
    <h1>Setting up the content as a counter in CSS Counters:</h1>
    <h2>GFG Extreme</h2>
    <h2>GFG Supreme</h2>
    <h2>GFG Stream</h2>
  
</body>
  
</html>


Output:

Example 3: This is an example of setting up a counter, here the value of the counter increases its value with one and connects it with the starting of each part, and also it increases the value of subsection as well:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h3 {
            counter-reset: SS;
            color: blue;
        }
          
        h3::before {
            counter-increment: S;
            content: counter(S) ". ";
            <!--Inserts generated content-->
        }
          
        h4::before {
            counter-increment: SS;
            content: counter(S) "." counter(SS) " ";
            <!--Inserts generated content-->
        }
          
        h4 {
            color: green;
        }
    </style>
</head>
  
<body style="counter-reset: S;text-align:center">
    <!--Creates or resets a counter-->
  
    <h1>Setting up the content as a counter in CSS Counters:</h1>
    <h3>GFG Supreme:</h3>
    <strong>Superb</strong>
    <strong>Success</strong>
  
    <h3>GFG Extreme:</h3>
    <strong>Extraordinary</strong>
    <strong>Excellent</strong>
  
    <h3>GFG Marine:</h3>
    <strong>Marvellous</strong>
    <strong>Mind Blowing</strong>
  
</body>
  
</html>


Output:



Last Updated : 24 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads