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