<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Numbering the HTML elements
</
title
>
<
style
>
*>* {
margin: auto;
}
h1 {
width: max-content;
margin-top: 30px;
color: green;
}
h3,
p {
width: max-content;
}
.counter-section {
margin-top: 50px;
max-width: 800px;
counter-reset: section;
}
.counter-section>* {
padding: 5px;
}
.counter-section .section-title::before {
counter-increment: section;
content: counter(section) ": ";
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Numbering the HTML elements using CSS without Lists
</
h3
>
<
div
class
=
"counter-section"
>
<
h3
class
=
"section-title"
>
This is a Geeks for Geeks heading
</
h3
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
h3
class
=
"section-title"
>
This is another Geeks for Geeks heading
</
h3
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
h3
class
=
"section-title"
>
This is another Geeks for Geeks heading
</
h3
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
<
p
>
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks.
</
p
>
</
div
>
</
body
>
</
html
>