How to create numbering using the counter-increment property in CSS
How to Create Numbers with the CSS Counter-Increment Property
The CSS “counter-increment” property is used to increase or decrease the value of a counter, which we can display on a web page using CSS. CSS counters are useful when we want to count the number of times an HTML element appears on a web page.
We’ll also use the “counter-reset” CSS property here, which helps us reset or initialize the value of a CSS counter to a desired number.
Grammar
- counter-increment –
css-counter increment-value;
Here, css-counter refers to the counter variable declared in CSS, and increment-value refers to the value of the CSS counter you want to increase or decrease.
- counter-reset: css-counter reset-value.
Here, css-counter refers to the counter variable declared in CSS, and reset-value refers to the value to which you want to reset the counter.
Example 1
In this example, we’ll create a CSS counter that counts the number of occurrences of the “p” tag and displays the count on a web page. We’ll set the initial count to 0 and then increment the counter by 1 for each occurrence of the “p” tag.
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
}
p {
counter-increment: p-count;
}
p::before {
content: counter(p-count) ". ";
}
</style>
</head>
<body>
<h3>How How to create numbering using the counter-increment property in CSS?</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
</body>
html>
Example 2
In this example, we’ll create two CSS counters to count the number of occurrences of the “p” tag and display their counts on a web page. We’ll create a nested list structure, first displaying the count of the “p” tags numerically, and then displaying the count of the “sub” class of “p” tags using Roman numerals.
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
}
.sub {
counter-reset: sub-count;
margin-left: 10px;
}
.par {
counter-increment: p-count;
}
.child {
counter-increment: sub-count;
}
.par::before {
content: counter(p-count) ". ";
}
.child::before {
content: counter(p-count, lower-roman) ". ";
} </style>
</head>
<body>
<h3>How to create numbering using the counter-increment property in CSS?</h3>
<p class="par">First paragraph</p>
<p class="par">Second paragraph</p>
<div class="sub">
<p class="child">Sub first</p>
<p class="child">Sub second</p>
</div>
</body>
</html>
Summary
In this article, we learned how to use the “counter-reset” and “counter-increment” properties provided by CSS to create numbers and display them on our web pages. “Counter-reset” can help us reset a counter to a specific value, while “counter-increment” can help us increase or decrease a counter by a specific value.