CSS-Tricks: Nummerierung von Überschriften und Untertiteln

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

css-counter-headings

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.

Tutorial zum Thema CSS Counter ansehen: Hongkiat.com/css-automatic-numbering

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.

Infos über CSS-Pseudoelemente: w3schools.com

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:

CSS-Zähler-Musterbeispiel

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

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *