Automatische Nummerierung von Überschriften

Zuletzt aktualisiert: Samstag, 31. Dezember 2016 Geschrieben von Jan Pionzewski

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 2.1-Eigenschaften content, counter-reset und counter-increment, sowie das Pseudoelement :before.

 

Code-Beispiel (CSS):

body {
counter-reset: level1;
}
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;
}
h3:before {
content: counter(level1) "." counter(level2) "." counter(level3) " ";
counter-increment: level3;
}
body {
padding: 40px;
}

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

h2 {
margin-left: 10px;
}

h3 {
margin-left: 20px;
}

 

Code-Beispiel (HTML):

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

 

Anzeigebeispiel ansehen (auf JSFiddle.net)

 

Browser-Kompatibilität

Dieses Script wurde von mir 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 funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 

 

Kommentar schreiben