Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create numbering using counter-increment property in CSS?
The CSS counter-increment property 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 */
selector {
counter-increment: counter-name increment-value;
}
/* counter-reset */
selector {
counter-reset: counter-name reset-value;
}
Here, the counter-name 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. The reset-value refers to the value you want to reset your counter to.
Example 1: Basic Paragraph Numbering
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
font-family: Arial, sans-serif;
}
p {
counter-increment: p-count;
margin: 10px 0;
}
p::before {
content: counter(p-count) ". ";
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h3>How to create numbering using counter-increment property in CSS?</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
</html>
The webpage displays numbered paragraphs: 1. First paragraph 2. Second paragraph 3. Third paragraph Each paragraph is automatically numbered using CSS counters.
Example 2: Nested Counters with Roman Numerals
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-paragraphs in roman number format
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
font-family: Arial, sans-serif;
}
.sub {
counter-reset: sub-count;
margin-left: 20px;
border-left: 2px solid #ccc;
padding-left: 15px;
}
.par {
counter-increment: p-count;
margin: 10px 0;
}
.child {
counter-increment: sub-count;
margin: 5px 0;
}
.par::before {
content: counter(p-count) ". ";
font-weight: bold;
color: #333;
}
.child::before {
content: counter(sub-count, lower-roman) ". ";
font-weight: bold;
color: #666;
}
</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>
<p class="child">Sub third</p>
</div>
</body>
</html>
The webpage displays numbered paragraphs with nested numbering:
1. First paragraph
2. Second paragraph
i. Sub first
ii. Sub second
iii. Sub third
The main paragraphs use decimal numbers while sub-paragraphs use roman numerals.
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. counter-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.
398 Views
