This article will focus on the CSS counter property, which helps us adjust the content’s appearance based on its location on a webpage. For example, we can use a counter to automate the number of headings on the webpage. We can create our own named counters and modify the default list item by using the counter property and its related functions and properties, which are Counter-reset, Counter-Increment, Content, and Counter.

Example 01: Using the CSS Counter Property for Automatically Numbering Headings in an HTML File

In this example, we discuss the counter property, which automatically assigns a number to any element of the Hypertext Markup language. We will be numbering our headings in this example by using different functions of the counter property:

We will start with the header of the file, where we will assign styling properties to the body and h2 tag of the file. For the body tag, we will be using the counter reset function. For the h2 tag, we will use the counter increment property and the content property, which will assign the counter-generated numbers to the h2 tag in the body.

After this, we will open the body tag in which we will provide a title to the page by using the h1 tag. Then we will add multiple h2 tags with the styling properties defined in the styling tag. We have a list of people’s names and their employees’ IDs, which need to be auto-increased when a new name is added to the list. We have added a pretext using content property, i.e., “Employee ID:” and then use the counter to increment the value. Next, we will close all the remaining tags to end the file and open it on our browser to view the styling properties.

In the previous snippet, we can see the employee id, which was the content we defined. The values are auto-increment through the counter, i.e., 1, 2, 3, 4, etc.

Example 02: Using the CSS Counter Property To Create Multiple Headings and Subheadings With Hierarchical Numbers

In this example, we will number our headings and subheadings utilizing various functionalities of the counter property. In this example, we will look at the counter property, which assigns a number to any element in the Hypertext Markup language.

In this script, we will implement the concept of the nested counter. First, we will define the counter in the body style class, named “Section.” Here, we defined two counter names, Section and Subsection, respectively. As we have a list of headings and subheadings, we reset both counters for the specific elements. Now, we will extend the h1 and h2 styling class with the before state. In this part of the class, we will define the content adjustment for the heading and subheading by using the counter increment and content properties. Then, we will add the heading and subheading using the h1 and h2 tags, respectively. We will be creating two sections with separate headings and subheadings. Then, we will close the tags and end the file to save it in the “.html” format so that we can open it in our browser.

In the previous output, we can see that the two sections have different numbering as defined in the styling class of the file. The heading number increases as well as the subheadings’ number, which is reset to one when they are called to another section.

Example 03: Creating a Number Ordered List Using the CSS Counter Property in an HTML File

In this example, we will create an ordered list that will be numbered using the counter property and its related functions, dividing the list into different sections with predefined numbers per the change of section.

In this script, we will be adding the styling classes initially as we are opting for the style tag CSS method. The style tag will first have the “ol” tag for providing styling properties. In this class, we will start with the counter reset function, which will be set to the section function. Then we will add the list style type property, which can be used to add any predefined style or the default view of the list. We will only add styling properties to this tag’s “before” state. In this section, we will add the counter-increment property, which will be set to the section function, and define the content property with the counter function having the content added as the suheadings’ parameter. This part of the style tag will assign the correct set of numbers with several subheadings and sub-subheadings. Then we will create an ordered list with five different sections using the ol and li tags.

As we can see in the previous snippet, the headings, subheadings, and sub-subheadings are perfectly organized with a distinct set of numbers concerning their respective section and are distinct from other sections simultaneously.

Example 04: Creating a Dynamic Page List Using the CSS Counter Property in an HTML File

We will create a dynamic page list using the CSS counter property in this example. We will assign the page list numbers, adapted to the flow change on page traversal on our webpage. The style tag approach for CSS will be utilized in this example:

The previous script is an example of a list with dynamic paging through counters. In the ul tag of the styling class, we will reset the counter for the paginate counter. Then, we will create a styling class collectively for the ul and li tags where we will give it design properties by adding padding, color, and margin, giving it a solid border, cursor pointer, and the floating property. After this, we will move to the next and previous state of the ul and li tags in the same class, where we will add the counter-increment property, which will be set to the paginate counter. We will also define the content property with the paginate counter function having the content to be added as the parameter. After this, we will create a list in the file’s body using the li and ul tags. The first li tag will have the previous class as the styling properties guide, while the last li tag will have the following class as the styling properties guide, and the rest will be empty.

We can see the list is created in an ordered series of numbers with an incremental state along with the next and previous buttons and the stylings as defined in the styling tag.

Conclusion

In this article, we discussed the several functions of the CSS counter property in the Hypertext Markup language. The CSS counter property is used to assign numbers to any element dynamically. With the help of its related functions, we can swirl around the labeling changes in the heading according to the section. The counter increment and counter reset are the most common functions when assigning numbers to an element. We implemented the CSS counter property and its related functions in different scenarios in the Notepad++ environment.