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 (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;
}

 

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)

 

Kompatibilität

Dieses Script habe ich 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.