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 set the content as a counter?
CSS counters allow you to automatically number elements on a web page without JavaScript. They work by creating variables that can be incremented and displayed as content using pseudo-elements like ::before and ::after.
Syntax
/* Reset/create counter */
parent-element {
counter-reset: counter-name;
}
/* Increment and display counter */
element::before {
counter-increment: counter-name;
content: counter(counter-name);
}
CSS Counter Properties
counter-reset Creates or resets a counter to zero (or specified value)
counter-increment Increases the counter value by 1 (or specified amount)
content Displays the counter value using the
counter()functioncounter() Returns the current value of a named counter
Example: Basic Counter
This example demonstrates numbering div elements automatically
<!DOCTYPE html>
<html>
<head>
<style>
.container {
counter-reset: itemCounter;
border: 2px solid #333;
padding: 10px;
}
.item {
border: 1px solid #007bff;
margin: 5px 0;
padding: 10px;
background-color: #f8f9fa;
}
.item::before {
counter-increment: itemCounter;
content: "Item " counter(itemCounter) ": ";
font-weight: bold;
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<div class="item">First content block</div>
<div class="item">Second content block</div>
<div class="item">Third content block</div>
<div class="item">Fourth content block</div>
</div>
</body>
</html>
Four numbered content blocks appear with blue borders. Each shows "Item 1:", "Item 2:", etc. before the text content.
Example: Nested Counters
This example shows how to use multiple counters for nested elements
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
counter-reset: sectionCounter;
border: 2px solid #dc3545;
padding: 15px;
}
.section {
counter-reset: subCounter;
border: 1px solid #28a745;
margin: 10px 0;
padding: 10px;
}
.section::before {
counter-increment: sectionCounter;
content: counter(sectionCounter) ". ";
font-weight: bold;
color: #dc3545;
}
.subsection::before {
counter-increment: subCounter;
content: counter(sectionCounter) "." counter(subCounter) " ";
font-weight: bold;
color: #28a745;
}
.subsection {
margin: 5px 0 5px 20px;
padding: 5px;
border-left: 2px solid #28a745;
}
</style>
</head>
<body>
<div class="main-container">
<div class="section">First Section
<div class="subsection">First subsection</div>
<div class="subsection">Second subsection</div>
</div>
<div class="section">Second Section
<div class="subsection">First subsection</div>
<div class="subsection">Second subsection</div>
<div class="subsection">Third subsection</div>
</div>
</div>
</body>
</html>
A hierarchical numbering system appears showing "1. First Section" with "1.1 First subsection", "1.2 Second subsection", then "2. Second Section" with "2.1", "2.2", "2.3" subsections.
Conclusion
CSS counters provide an elegant way to automatically number elements without JavaScript. They're perfect for creating numbered lists, sections, or any sequential content that needs automatic numbering.
240 Views
