CSS Automatic Numbering Tutorial Counter For HTML Elements

This CSS tutorial will show you everything you need to know to create your own automated numbering shortcut that can be used for any kind of HTML elements.

The idea is simple enough, use CSS to automate the numbering of lists, outlines, documents, etc. And it even works to provide sub-section numbering. It only requires a few lines of code, so let’s jump right into it and see how it all works.

In the example code below, you can see that it is the same as what is shown in the video tutorial. It’s quite an easy addition to include and will make the browsing experience of the user much nicer, as well as keep your content more organized. CSS is as flexible as you need it to be, in a situation like this.

<style type="text/css">
h1 { counter-reset: section; }
h2 { counter-reset: subsection; }
h2::before {
    content: counter(section) ". ";
    counter-increment: section;
}
p::before {
    content: counter(section) "." counter(subsection) " ";
    counter-increment: subsection;
}
</style>
<h1>HTML</h1>
<h2>HTML Multimedia Elements</h2>
<p>audio</p>
<p>embed</p>
<p>video</p>
<h2>HTML Form Elements</h2>
<p>form</p>
<p>input</p>
<p>textarea</p>
<p>button</p>

If you have a tutorial request, or happen to have one of your own that you would like to share with the community, please let us know by sending us a message today. And before you leave, you should check out this other great tutorial on using CSS3 Nth-child selectors. Thanks for stopping by!