Number headings and subheadings automatically

Written byPhuoc Nguyen

Created

14 Mar, 2021

Tags

CSS

It's a common approach to use the DOM APIs to find all headings on the page, and number each of them. This post introduces another way to do that with CSS only.

If you follow some search engine optimization (known as SEO) practices, you are adviced to use only one `h1` tag on the page. The single `h1` tag is used to display the main title. Hence, we will ignore the `h1` tag when numbering the headings.

Given the following markup:

html

<h2>Chapter 1</h2>

<h3>Section 1</h3>
<h4>Sub section A</h4>

<h3>Section 2</h3>
<h4>Sub section A</h4>
<h4>Sub section B</h4>

<h2>Chapter 2</h2>

It should produce the content as below:

shell

1. Chapter 1

1.1. Section 1
1.1.1. Sub section A

1.2. Section 2
1.2.1. Sub section A
1.2.2. Sub section B

2. Chapter 2

We can archive it by using the CSS counter.

Going down from the `body` element, we will reset the counter for the first `h2`. The numbers are inserted before the content via the `::before` pseudo element:

css

body,
h1 {
    counter-reset: h2;
}
h2::before {
    counter-increment: h2;
    content: counter(h2) '. ';
}

The `counter-increment` property indicates that when we see the next `h2` tag, the number will be increased by one.

We continue using the same technique for `h3` tags. The number for a `h3` heading must be prefixed with the number of its parent `h2` tag:

css

h2 {
    counter-reset: h3;
}
h3::before {
    counter-increment: h3;
    content: counter(h2) '.' counter(h3) '. ';
}

Here we use the `.` character to separate the numbers. If you want to number deeper headings such as `h4`, `h5`, then the CSS should look like as following:

css

h3 {
    counter-reset: h4;
}
h4 {
    counter-reset: h5;
}
h4::before {
    counter-increment: h4;
    content: counter(h2) '.' counter(h3) '.' counter(h4) '. ';
}
h5::before {
    counter-increment: h5;
    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '. ';
}

#See also

Append leading zeros to ordered list items

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Number headings and subheadings automatically

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔