Automatische Nummerierung von Überschriften

Mit CSS kannst du sehr einfach die Überschriften in einem Artikel auf deiner Webseite automatisch nummerieren lassen. In diesem Artikel zeige ich dir, wie das funktioniert.

Automatische Nummerierung von Überschriften mit CSS

Eine automatische Nummerierung der Überschriften ist vor allen Dingen dann sinnvoll, wenn du beispielsweise Tutorials auf deiner Website anbietest. Auch für längere Texte, die in mehrere Abschnitte unterteilt sind, kann eine solche Nummerierung sinnvoll sein. Um das zu realisieren, braucht man die CSS Eigenschaften content, counter-reset und counter-increment, sowie das Pseudoelement :before.


Beispiel:

body {
  counter-reset: level1;
  padding: 40px;
}

h1, h2, h3 {
  margin: 0 0 10px 0;
  border-bottom: 1px dotted;
}

h1::before {
  content: counter(level1) " ";
  counter-increment: level1;
}

h1 {
  counter-reset: level2;
}

h2::before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

h2 {
  counter-reset: level3;
  margin-left: 10px;
}

h3::before {
  content: counter(level1) "." counter(level2) "." counter(level3) " ";
  counter-increment: level3;
}

h3 {
  margin-left: 20px;
}

Danach definierst du auf deiner Website ganz normal die Überschriften. Die Änderungen werden automatisch vom Browser umgesetzt.


Beispiel:

<h1>Überschrift des Artikels</h1>
<h2>Kapitel A</h2>
<h3>Abschnitt A</h3>
<h3>Abschnitt B</h3>
<h2>Kapitel B</h2>

Anzeigebeispiel:

Folge einfach diesem Link (öffnet sich in einem neuen Tab), um dir das Anzeigebeispiel anzusehen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.