In CSS we have the concept of counters which are the variables whose value keep increasing with some set of CSS rules. In this tutorial, we will be learning how can we use CSS counter to number specific content on a web page.
Numbering using Counter
The counter represents a numeric variable which value can be incremented by some rules, and the counter helps in tracking how many times a specific element is used on the web wage. There are 4 properties we need to work with the Counter
counter-reset
|
If there is no counter variable then create a variable else reset the old one. |
counter-increment
|
Increase the value of Counter |
content
|
Insert textual content using CSS |
counter() or counters()
|
Insert the value of counter variable in the element. |
How to work with the counter?
The first thing we need to work with counter is counter-reset property. It creates a variable which can be inserted in the element with each increment value of the counter.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*It will create or reset the counter variable para for complete page or body*/
body {
counter-reset: para;
}
p::before {
/*increase the para variable value by 1*/
counter-increment: para;
/*Insert the para value before the paragraph*/
content: counter(para) ": ";
}
</style>
</head>
<body>
<p> This is the First Paragraph</p>
<p> This is the Second Paragraph </p>
<p> This is the third Paragraph</p>
</body>
</html>
Preview
1: This is the First Paragraph
2: This is the Second Paragraph
3: This is the third Paragraph
Behind the Code
CSS
In the above example first, we create a counter variable
para
using the
counter-reset:para
property and value. Here the value
para
is arbitrary, you can use any variable name. In the
p::before
styling we increase the value of
para
variable by every
<p>
element by using the
counter-increment: para;
statement, and at last we insert the
para
variable value for each paragraph using the
content
property and
counter(para)
value.
Nested Counters
In the above example, we created a counter for paragraph elements, but it represents all the paragraphs present inside the
<body>
element. What If we want two different counter one for those paragraphs which are the direct child of
<body>
and another for those which are the child of a
<div>
element, for this case, we can use a nested counter. let’s see how can we create two different counters for <p> elements using the nested counter.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*It will create or reset the counter variable body_para for complete page or body*/
body {
counter-reset: body_para;
}
/*It will create or reset the counter variable div_para for <div> element*/
div{
counter-reset: div_para
}
div p::before {
/*increase the div_para variable value by 1*/
counter-increment: div_para;
/*Insert the div_para value before the paragraph*/
content: counter(div_para) ": ";
}
p::before {
/*increase the body para variable value by 1*/
counter-increment: body_para;
/*Insert the body para value before the paragraph*/
content: counter(body_para) ": ";
}
</style>
</head>
<body>
<p> Body First Paragraph</p>
<p> Body Second Paragraph </p>
<div>
<p>Div First Paragraph</p>
<p> Div Second paragraph</p>
/div>
</body>
</html>
Preview
1: Body First Paragraph 2: Body Second Paragraph
Summary
-
Counters are the variable in CSS which numeric value can be incremented using
counter-incrementproperty. - Counter helps in keep tracking how many times an element is used in a web page.
- Using the nested counter, we can also track how many times an element is used inside another element.
-
Using the
contentproperty we can insert new content before and after an element using the::beforeand::afterpaseudo-elements.