Wie Sie mit CSS-Zählern Haupt- und Untertitel automatisch nummerieren

Angenommen, Sie haben in einem HTML-Dokument eine Reihe von Überschriften mit Haupt- und Unterpositionen und möchten diese manuell oder über ein Skript durchnummerieren.

In diesem Fall können Sie ganz einfach einen sogenannten CSS-Zähler einbauen und damit eine optische Verbesserung Ihres Beitrages erreichen. Ein Zähler lässt sich an vielen Stellen einer Website verwenden und bietet einige nützliche Funktionen.

Der CSS-Zähler besteht aus zwei Haupteigenschaften: [counter-reset] und [counter-increment]. Die CSS-Anweisung [counter-reset] wird verwendet, um den Zähler zurückzusetzen, während die Anweisung [counter-increment] – gepaart mit einem Pseudoelement –verwendet wird, um die Zahlen zu addieren.

Da der CSS-Zähler eine CSS2-Spezifikation ist, ist die Unterstützung dieser tollen Eigenschaft durch so gut wie alle Browser gegeben, außer vielleicht IE6.

Mein Musterbeispiel ansehen:

HTML

   
Heading Title
    
Subheading Title
    
Subheading Title
   
Heading Title
    
Subheading Title
    
Heading Title
   
Subheading Title
    
Heading Title

CSS

#page {
  counter-reset: heading;
}
h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}
h1 {
  counter-reset: subheading;
}
h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}
body{
  font-family: courier new;
}
h2 {margin-left: 25px;}

Quelle ansehen und Beispiel herunterladen (unter dem Button „Share“):
CodePen.is/Preethi