How to do HTML heading / outline numbering with CSS


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


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
<h1>Heading 1</h1>
<h2>Heading 1.1</h1>
<h2>Heading 1.2</h1>
<h1>Heading 2</h1>
<h2>Heading 2.1</h1>
<h2>Heading 2.2</h1>
  • Result:

Powered by ComboStrap