Open In App

How to number HTML elements using CSS without lists ?

Improve
Improve
Like Article
Like
Save
Share
Report

Sometimes we have to number the Headings, Paragraphs, Section Titles, Buttons, Cards, and many other elements for which lists are not an appropriate element tag. In this scenario, we can take the help of CSS counters. It is not a way to replace ordered or unordered in any sense lists. It is just that sometimes the lists are not appropriate tags to use. We can define the counters with our own desired names. In this article, we will see how to number the HTML elements using the CSS properties & without utilizing the List.

Counters are just variables maintained by CSS whose values can be incremented or decremented. To use counters, it must be defined and initialized using the counter-name property inside the parent class of the element that we want to use counters on. Then the counter-increment property can be used to increment the counter value.

Note: We cannot display the numbering in reverse order as reversed function is only supported by FIREFOX and not other browsers although the counter values can be decremented.

Syntax:

body or parent element {
      counter-reset: name; /* to initialize the counter */
}

element::after {
  /* this is basically a condition met, like 
    in programming, to implement the counter action.*/
    
  counter-increment: name number-of-count;
  /* to increment the counter by the specified number of 
  count if no value is specified 1 is default */
  
  content: "# " counter(name) ": "; /* to display the counter */
}

Approach:

  • First, in the HTML file add up all the sections, buttons, and all other things that you want to number.
  • Now add a class to the outer section or div of the element that you want to number.
  • Along with the appropriate styling set the desired name to your counter by assigning it to the counter-reset property, you can do this in the body element also.  
  • Use pseudo-elements on the class of the element which you want to number to trigger the action of incrementing the counter
  • If needed you can show the numbering here using the content property.

Example 1: In this example, we make numbered titles to make them look like chapters or lessons by following the above-stated approach 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Numbering the HTML elements
    </title>
    <style>
        *>* {
            margin: auto;
        }
 
        h1 {
            width: max-content;
            margin-top: 30px;
            color: green;
        }
 
        h3,
        p {
            width: max-content;
        }
 
        .counter-section {
            margin-top: 50px;
            max-width: 800px;
            counter-reset: section;
        }
 
        .counter-section>* {
            padding: 5px;
        }
 
        .counter-section .section-title::before {
            counter-increment: section;
            content: counter(section) ": ";
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        Numbering the HTML elements using CSS without Lists
    </h3>
    <div class="counter-section">
        <h3 class="section-title">
            This is a Geeks for Geeks heading
        </h3>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <h3 class="section-title">
            This is another Geeks for Geeks heading
        </h3>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <h3 class="section-title">
            This is another Geeks for Geeks heading
        </h3>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge & skills
            with a variety of learning platforms
            offered by GeeksforGeeks.
        </p>
    </div>
</body>
</html>


Output:

 

Example 2: This is another example illustrating numbering the HTML elements without lists, to make numbered buttons list.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        Numbering the HTML elements
    </title>
    <style>
        *>* {
            margin: auto;
        }
 
        h1 {
            width: max-content;
            margin-top: 30px;
            color: green;
        }
 
        h3 {
            width: max-content;
        }
 
        p {
            width: max-content;
        }
 
        .counter-section {
            margin-top: 50px;
            max-width: 800px;
            counter-reset: section;
        }
 
        .counter-section>* {
            padding: 5px;
        }
 
        .counter-section .section-button::before {
            counter-increment: section;
            content: "Step " counter(section);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        Numbering the HTML elements using CSS without Lists
    </h3>
    <div class="counter-section">
        <button class="section-button"></button>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <button class="section-button"></button>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <button class="section-button"></button>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
 
        <p>
            Gain and share your knowledge &
            skills with a variety of learning
            platforms offered by GeeksforGeeks.
        </p>
    </div>
</body>
</html>


Output:

 



Last Updated : 01 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads