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:

Discover More
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
CSS - list-item (list formatting)

This page is the formatting of element seen as a list-item. A list-item has: a principal block box (the normal box) and anadditional box known as themarker box (the marker). All properties applies...
Html Heading Sequentiel Order
HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

Heading define the structure / outline / table of content of the document (page) They are defined via: the heading element (h1/h6) via the aria heading role section of the document letter, the...
How to use CSS Counter ?

css supports counter variable that can be used in a property value (for instance in a content property to add numbering to: heading or list For instance: We create two counters: one for...

Share this page:
Follow us:
Task Runner