Introduction to CSS Counter
The CSS counter is defined as numbering the HTML variables automatically CSS rules with counter properties. This numbering with counter is auto incremented every time. Their properties are used to auto increment the values for headers, paragraphs, div tags, footer content etc. We can say that for numbering in HTML <ol> tag is used whereas in CSS counter property is used.
Properties
Given below are the four properties:
- counter-reset: This is used for reset the counter.
- counter-increment: This is used for increment the counter value.
- content: This is used to generate the content.
- counter() or counters() function: This is used for displaying the counter value by using either counter() function or counters()function within a content property. These basically adds the value of a counter to the element.
Note: Make use of CSS counter property initially we must create the “counter-reset” property.
How does Counter property work in CSS?
- Its working is based on assigning counter-reset value to the counter-increment property and align the content in specific order by using content property.
Syntax 1
counter-reset: getCounter;Syntax 2
counter-increment: getCounter;Note: To increment the value we must assign counter-reset value (getCounter) to the counter-increment.
Syntax 3
content: counter(getCounter);Note: counter() or counters() function used to display the content is specific order.
Examples
Given below are the examples are mentioned:
Example #1
Counter property with paragraphs.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS counter property</title>
<style>
body {
counter-reset: getCounter; /*First initializing the counter*/
}
p
{
color: red;
font-size: 24px;
}
p::before {
counter-increment: getCounter; /*Incrementing the counter with getCounter reference*/
content: "Paragraph " counter(getCounter) ": "; /*GIve the numbers to paragraphs like Paragraph 1:,Paragraph 3:,Paragraph 3:...*/
}
.header {
text-align:center;
color: green;
}
h2
{
color: brown;
text-align: center;
}
.main
{
border: solid 2px blue;
}
</style>
</head>
<body>
<div class="main">
<div class = "header"><h1>Counter property with Paragraphs content</h1></div>
<p>The CSS counter is defined as numbering the HTML variables automatically CSS rules with counter properties.</p>
<p>This numbering with counter is auto incremented every time.</p>
<p>CSS counter properties are used to auto increment the values for headers, paragraphs, div tags, footer content etc</p>
<p>We can say that for numbering in HTML ol tag is used
whereas in CSS counter property is used.</p>
<h2>CSS counters properties: CSS counter have 4 properties </h2>
<p>counter-reset: This is used for reset the counter.</p>
<p>counter-increment: This is used for increment the counter value.</p>
<p>content: This is used to generate the content.</p>
<p>counter() or counters() function: This is used for displaying the counter value by using either counter() function or counters()
function() within a content property. These are basically adds the value of a counter to the elelement.</p>
</div>
</body>
</html>Output:
Example #2
Counter property with headers.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS counter property</title>
<style>
body {
counter-reset: getCounter; /*First initializing the counter*/
}
p
{
color: orange;
font-size: 24px;
border: dashed 2px navy;
}
h2::before {
counter-increment: getCounter; /*Incrementing the counter with getCounter reference*/
content: "Heading " counter(getCounter) ": "; /*Give the numbers to headings like Heading 1:,Heading 3:,Heading 3:...*/
}
h1 {
text-align:center;
color: fuchsia;
}
h2
{
color: maroon;
}
.main
{
border: solid 2px red;
}
</style>
</head>
<body>
<div class="main">
<h1>Counter property with Header content</h1>
<p>The CSS counter is defined as numbering the HTML variables automatically CSS rules with counter properties. This numbering with counter is auto incremented every time. CSS counter properties are used to auto increment the values for headers, paragraphs, div tags, footer content etc. We can say that for numbering in HTML ol tag is used whereas in CSS counter property is used.</p>
<h1>Colors and The Color is Symbol of Specific behaviour</h1>
<h2>Green is for Cool</h2>
<h2>Maroon is for Colorful</h2>
<h2>Yellow is for beatiful</h2>
<h2>Red is for danger</h2>
<h2>Blue is for sky</h2>
<h2>Violet is for gods</h2>
<h2>Pink is for romance</h2>
<h2>White is for Peace</h2>
</div>
</body>
</html>Output:
Example #3
Nested Counter property with Headers.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS counter property</title>
<style>
body {
counter-reset: counter1; /*First initializing the counter*/
}
h1 {
counter-reset: counter2; /*First initializing the counter*/
}
h1::before {
counter-increment: counter1; /*Incrementing the counter with getCounter reference*/
content: counter(counter1) ". "; /*Give the numbers to headings like Heading 1:,Heading 3:,Heading 3:...*/
}
h2::before {
margin-left:40px;
counter-increment: counter2; /*Incrementing the counter with getCounter reference*/
content: counter(counter1) "." counter(counter2) " "; /*Give the numbers to headings like Heading 1:,Heading 3:,Heading 3:...*/
}
p
{
color: blue;
font-size: 24px;
border: dashed 2px fuchsia;
}
h2
{
color: green;
}
h1
{
color: blue;
}
.main
{
border: solid 2px orange;
}
.real
{
text-align:center;
color: red;
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<p class="real">Nested Counter property with Headers content</p>
<p>The CSS counter is defined as numbering the HTML variables automatically CSS rules with counter properties. This numbering with counter is auto incremented every time. CSS counter properties are used to auto increment the values for headers, paragraphs, div tags, footer content etc. We can say that for numbering in HTML ol tag is used whereas in CSS counter property is used.</p>
<h1>Colors</h1>
<h2>Green</h2>
<h2>Blue</h2>
<h2>Violet</h2>
<h2>Pink</h2>
<h2>Brown</h2>
<h2>Red</h2>
<h2>Navy</h2>
<h2>Purple</h2>
<h1>Week Days</h1>
<h2>Sunday</h2>
<h2>Monday</h2>
<h2>Tuesday</h2>
<h2>Wednesday</h2>
<h2>Thursday</h2>
<h2>Friday</h2>
<h2>Saturday</h2>
<h1>Directions</h1>
<h2>East</h2>
<h2>West</h2>
<h2>North</h2>
<h2>South</h2>
<h2>North-East</h2>
<h2>North-West</h2>
<h2>South-East</h2>
<h2>South-West</h2>
</div>
</body>
</html>Output:
Conclusion
It is used for give the numbering to the paragraphs, headers, div tags, footers etc. These numbers can be automatically increment by assigning counter-reset property value to counter-increment property and align the content with content property.
Recommended Articles
This is a guide to CSS Counter. Here we discuss the introduction, properties, how does it work in CSS with sample code for better understanding. You may also have a look at the following articles to learn more –
