CSS counters allows us to number a list of elements of any type, as you would ordered lists that are numbered. Numbers are then incremented per element and displayed as generated content using CSS pseudo-elements. Using the corresponding CSS property, you can initialize a counter(s), and then specify the increment value, which specifies by how much the counter should be incremented for every occurrence of the element.
Counters can be very useful when we want to set a number of sections in some articles, or figures, and also for tables of contents. We can also use counters, for example, to count the titles on a webpage, being CSS-maintained variables, whose values can be enforced by CSS rules to determine how many times they are used.
In order to be able to use a CSS counter, the first phase must be initialized to a value with the reset property, 0 by default. Similarly, the same property can be used to change its value to any specific number. has been initialized, meter count can be lowered or increased by counter-increment. To ensure that the statement is not ignored, keep in mind that the name of the counter is not “inherited” or “initially” or “none”
To be able to display the value of a counter, we use the counter() function, or counters(), in a content property.
This function, namely counter(), has two configurations: counters(name, string) or counters (name, string, style). It can be formatted in specified style, by decimal.
Also, the counters () function has two configurations: “counters (name, string)” or “counters (name, string, style).” The resulting text is the sum of all counters with the given name in the scope, the outermost to the most inward, being separated by the specified string. Counters are rendered in the specified style (decimal).
Automatic Numbering with Counters
As I said above, CSS counters are the variables, and their values can be incremented by CSS rules, rules that track how many times they will be used.
We will use the following properties to work with CSS counters:
- Counter-reset — does nothing but make a counter or reset it
- Counter-increment — increments a counter value
- Content — inserts generated content
- Counter() or counters() function — adds the value of a counter to an element
When we want to use a CSS counter, we will first have to create a counter-reset.
In the example below, we will try to create a counter for the page, then we will increase the value of the meter for each inserted element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) " - ";
}
</style>
</head>
<body>
<h1>CSS Counters example:</h1>
<h2>Protractor tutorial</h2>
<h2>Selenium tutorial</h2>
<h2>NodeJs tutorial</h2>
<h3>JavaScript tutorial</h3>
</body>
</html>
Nesting Counters
The usefulness of a CSS counter is extreme, at least for creating lists, because a new instance of the counter is automatically made for the child’s elements. Using the counters () function, separation text can be inserted between different levels of counters.
In the example that we will give below, we will create a counter for the page and a counter for each inserted element. Therefore, the counter section will be calculated for each item with the <value of the section counter> section. <value of the subsection counter>.
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) "- ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "-" counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Protractor tutorial:</h1>
<h2>Appium tutorial</h2>
<h2>JavaScript tutorial</h2>
<h1>Selenium tutorial</h1>
<h2>XCTest tutorial</h2>
<h2>TestRail tutorial</h2>
<h1>Jasmine tutorial:</h1>
<h2>Phantom Js</h2>
<h2>Page object tutorial</h2>
</body>
</html>
We can also use a counter to make detailed lists, because a new instance of a counter will be created automatically in the child’s elements. We will use the counters () function to insert a string between different levels of nested counters. In this example, we will use HTML elements such as <ol> and <li>. Let’s not forget that the first step is to reset the counter, giving the counter that name that initializes it from 0:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
font-size:25px;
font-style: helvetica;
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol class="toc">
<li>(Item 1)Intro</li>
<li>(Item 2)Topic
<ol>
<li>(Item 2.1)Subtopic</li>
<li>(Item 2.2)Subtopic</li>
<li>(Item 2.3)Subtopic</li>
</ol>
</li>
<li>(Item 3)Topic
<ol>
<li>(Item 3.1)Subtopic</li>
<li>(Item 3.2)Subtopic</li>
<li>(Item 3.3)Subtopic</li>
</ol>
</li>
<li>(Item 4)Closing</li>
</ol>
</body>
</html>
CSS Counter Properties
We’ll start with:
- content — used with the ::before and ::after pseudo-elements, to insert generated content
- counter-increment — increments one or more counter values
- counter-reset — creates or resets one or more counters
Here is another example:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
font-size: 21px;
counter-reset: section;
list-style-type: none;
}
li::before {
font-size: 21px;
counter-increment: section;
content: counters(section,".") " ";
}
type="text/CSS">
ul { list-style: outside }
ul.compact { list-style: inside }
</style>
</head>
<body>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class="compact">
<LI>first list item comes first
<LI>second list item comes second
</UL>
<p><b>This property specifies the position of the marker box relative to the main block box, the values having the following meanings: inside and outside.</p>
</body>
</html>
Conclusion
CSS counters are incredibly useful when it comes to displaying the base number into a table of contents. In most cases, you will be able to use the counters with :after and :before the pseudo-elements inserted, so that you do not dedicate empty elements to the content. We have seen counters used in slideshow devices, counters used in broadcast devices and counters used in documentation. Hopefully you have seen that counters are extremely useful.
