Getting Started with CSS Counters

Learn how to implement CSS counters, which allow you to adjust the appearance of web page content based on its location in a document.

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.

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>.

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:

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.

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.