CSS Counters

CSS Counters are variables which let you increment its value in a particular sequence to change the appearance of the content.

For Example–

You can use counters to automatically number the main topics of a page.
Counters can create something like an ordered list without using the actual order list (<ol>) property of CSS.

The important properties of Counters are –

counter-reset – This initializes the value of the counter or resets the value
counter-increment – Increments or decreases the value of the counter by a value.
content – It is a way to insert a generated content
counter() or counters() function – This function displays the value of the counter to the element and display

Simple Example of CSS Counters

body {
 counter-reset: countval;
 border:2px solid black;
 font-size:20px;
}

p::before {
 counter-increment: countval;
 content: "Lesson " counter(countval) " - ";
}

In the previous example, we applied the counter-reset on the body so it loops again and again to the body.

If we apply this only on <p> tag, then it applies only on the 1st <p> tag and the value does not increment as the loop does not apply to the body so the result will look different. Have a look below –

Example of improper looping in Counters

p {
 counter-reset: countval;
 border:2px solid black;
 font-size:20px;
}

p::before {
 counter-increment: countval;
 content: "Lesson " counter(countval) " - ";
}

We are going to explore more examples which uses counter-reset, counter-increment, content, counter() and counters().

CSS Counters Reset

The default value which counter-reset takes is Zero(0). See the ‘Type1’ in the below syntax.

There are ways to reset the value of the counter to a value other than zero.

For example –

If you want to reset the value of counter to 3, then you can code like –
counter-reset: counter-value 3;
Here, the value of counter-value will be 3
Similarly, if you code like –
counter-reset: counter-value 5;
Here, the value of counter-value will be 5
You can also code like – counter-reset: counter-value +5 (There is no space between ‘+’ and 5).This is same as – counter-reset: counter-value 5

The Syntax of Counters Reset
a) counter-reset:counter-val; /* Type 1 */
b) counter-reset:counter-val,num; /* Type 2 */
c) counter-reset:counter-val+num; /* Type 3 */

Where counter-val is a variable which will store the value of the numeric counter.

Example of Counters Reset(Type 2 and 3)

body {
 counter-reset: Numberval 3;
 border:2px solid black;
}

h2::before {
 counter-increment: Numberval;
 content: "Course " counter(Numberval) " :- ";
}

CSS Counters Increment

The counter-increment increments the value of the counter.

By default, the counter will increment by a value of 1. See the ‘Type1’ in the below syntax.

Type1 and Type3 will produce the same result.

The Syntax of Counter Increment:
a) counter-increment:counter-val; /* Type 1 */
b) counter-increment:counter-val,num; /* Type 2 */
c) counter-increment:counter-val+num; /* Type 3 */
d) counter-increment:counter-val-num; /* Type 4 */

Where counter-val is a variable which will store the value of the numeric counter.

Type 4 is a way to decrease the value of the counter in a sequence.

Example of Counters Increment (Type 2 and Type 3)

.pvalues {
 counter-reset: valueA;
}

p::before {
 counter-increment: valueA 2;
 content: "Topic " counter(valueA) " - ";
}

.h2values {
 counter-reset: valueB;
}

h2::before {
 counter-increment: valueB +2;
 content: "Topic " counter(valueB) " - ";
}

CSS Reverse Counters

In some cases, you are required to create a reverse counter so you need to provide a minus sign between the variable and the amount of value by which counter should decrease.

Example of Reverse Counters

body {
 counter-reset: reverseval 12;
 border:2px solid black;
 font-size:20px;
}

h3::before {
 counter-increment: reverseval -2;
 content: "Topic " counter(reverseval) " - ";
}

Nesting Counters

There is a way to create counters under a counter. This is called Nesting counters.

The steps to create Nested counters are –

Create counter-reset for the main counter for the <body> tag and the inner counter’s counter-reset on the tag(<h1> in this case) for which there should be nested counters
Increment the counters for the main element and the sub-element and display sub-items with generated content below the main item.
Move to the next main item and follow step 2 again

Warning/Danger/Info/Success Most of the Students get confused in Nesting of counters so make sure you write it down on a piece of paper and understand it properly

Example of Nesting Counters

body {
 counter-reset: Topic;
 }
 
h1 {
 counter-reset: subtopics;
 }
 
h1::before {
 counter-increment: Topic;
 content: "Chapter " counter(Topic) " - ";
}

h2::before {
 counter-increment: subtopics;
 content: counter(Topic) "." counter(subtopics) " ";
}

Change Counter Numbering Type using counter()

Internally, counter() function is defined like counter(counter-name). The other way to define the counter() function is like counter(counter-name, counter-style-type).
By default, the counter-style-type is Decimal but you can explicitly define the counter-style-type as well.

For example:

counter(ctr-1, lower-roman) /* lower-roman style counter */
counter(ctr-2, lower-latin) /* lower-latin style counter */
counter(ctr-3, lower-greek) /* lower-greek style counter */

Example to change the counter Numbering Type using counter()

.h2values {
 counter-reset: type1;
}

h2::before {
 counter-increment: type1;
 content: counter(type1, lower-roman) " - ";
}

.h3values {
 counter-reset: type2;
}

h3::before {
 counter-increment: type2;
 content: counter(type2, upper-roman) " - ";
}

.h4values {
 counter-reset: type3;
}

h4::before {
 counter-increment: type3;
 content: counter(type3, lower-latin) " - ";
}

Change Counter Numbering Type using counters()

The counters() function is almost same as counter() function but there are minor differences. Internally, counters() function is defined like counter(counter-name,counter-string). The other way to define the counters() function is like counters(counter-name, ,counter-string,counter-style-type).
By default, the counter-style-type is Decimal but you can explicitly define the counter-style-type as well.