Automatic Numbering Tutorial Element Counter

In this CSS lesson we will demonstrate automatic numbering of web page elements using the ::before selector, and a counter function. The counter-reset and counter-increment properties give us the logic needed to created numbered sections with subsections.

<style>
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>