How to do HTML heading / outline numbering with CSS

About

Adding a number before a heading is a css feature made available through:

• the counter feature
• of the content property

Example

heading numbering of a section

• The CSS

section { counter-increment: section; }
h2 { counter-increment: h2; }
h1::before { content: "Chapter " counter(section) ": \A"; }
h2::before { content: "Section " counter(section) "." counter(h2,lower-alpha) ": \A"; }

• The HTML

<section>
<h1>Heading 1</h1>
<h2>Heading 1.1</h1>
<h2>Heading 1.2</h1>
</section>
<section>
<h1>Heading 2</h1>
<h2>Heading 2.1</h1>
<h2>Heading 2.2</h1>
</section>

• Result: