CSS Counter
This property acts like variables and to these variable values we can also able to increment the values through
this property. It have some following properties:-
- counter-reset :Initialize the counter
- counter-increment : Increment the counter value
- content : Content is generated
- counter() : Adds value to the counter
Let's understand this by the following program:-
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: paragraph;
}
h2::before {
counter-increment: paragraph;
content: "Paragraph " counter(paragraph) ": ";
}
</style>
<head>
<body>
<h2> Java Tutorial </h2>
<h2> AWS Tutorial </h2>
<h2> Python Tutorial </h2>
<h2> Javascript Tutorial </h2>
</body>
</html>
Output of the Program
Java Tutorial
AWS Tutorial
Python Tutorial
Javascript Tutorial
So this is how to counter a page and increment the counter value for each next element..
Nesting Counters
Also we can create the counter inside counter . It is called nesting of counters.
Let's understand this y the following example :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1> Java tutorials </h1>
<h3> Core Java tutorial </h3>
<h3> Servlet tutorial </h3>
<h1> Web technology tutorials </h1>
<h3> HTML tutorial </h3>
<h3> CSS tutorial </h3>
<h1> Database tutorials </h1>
<h3> SQL tutorial </h3>
<h3> MySQL tutorial </h3>
</body>
</html>
Output of this Program :-
Java tutorials:
Core Java tutorial
Servlet tutorial
Web technology tutorials:
HTML tutorial
CSS tutorial
Database tutorials:
SQL tutorial
MySQL tutorial