- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create numbering using counter-increment property in CSS?
The “counter-increment” property given in CSS is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage.
We will also use the “counter-reset” CSS property here, which helps us to reset or initialize the CSS counter value to a desired number.
Syntax
counter-increment −
css-counter increment-value;
Here, the css-counter refers to the counter variable declared in CSS, and the increment-value refers to the value by which you want to increment or decrement the CSS counter.
counter-reset: css-counter reset-value.
Here, the css-counter refers to the counter variable declared in CSS, and the reset-value refers to the value you want to reset your counter to.
Example 1
In this example, we will create a CSS counter to count the occurrences of the “p” tag and display their counts on the webpage. We will set the initial count to 0, and increment the counter by 1, on each occurrence of a “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 to create numbering using counter-increment property in CSS?</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
</body>
</html>
Example 2
In this example, we will create 2 CSS counters to count the occurrences of the “p” tag and display their counts on the webpage. We will create a nested list structure where first we will show the count of “p” tags in numerals, and then we will show the count of the “sub” class “p” tags in roman number format.
<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 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>
Conclusion
In this article, we learned how to create numbering and display them on our webpage, using the “counter-reset” and “counter-increment” properties provided to us by CSS. “couter-reset” helps us to reset our counter to a particular value, and “counter-increment” helps us to increase or decrease our counter by a particular value.
343 Views
