Überschriften mit CSS hochzählen

Der Artikel erklärt, wie man mit Hilfe von CSS Generated Content gleiche Elemente hochzählen kann.

Problem

Folgendes Problem soll gelöst werden: Man hat auf seiner Seite z. B. mehrere h1-Überschriften. Nun möchte man sie alle mit einer Nummer versehen. Es soll also statt nur "Überschrift" "1. Überschrift" da stehen. Dies kann man entweder mit Javascript lösen, d. h. man manipuliert das DOM der Seite, nachdem sie fertig geladen ist. Oder man kann das mit Hilfe von CSS Generated Content erreichen.

Lösung

Unser HTML-Code sieht z. B. so aus:

<h1>Überschrift</h1>
<h1>Überschrift</h1>
<h1>Überschrift</h1>

Wir haben also in unserem Beispiel 3 Überschriften der Ebene h1.

Nun können wir per CSS definieren, dass vor jeder Überschrift eine Nummerierung steht. Das geht so:

body { counter-reset:zaehler; }
h1:before { content:counter(zaehler) ". "; counter-increment:zaehler; }

Zuerst setzen wir den Counter auf den Ausgangswert und definieren die Variable zaehler, die eine Referenz auf den Counter ist.

Dann fügen wir mit h1:before neuen Inhalt vor den einzelnen Überschriften ein. Man könnte hier auch nur Überschriften einer bestimmten CSS-Klasse ansprechen. Dann müsste man halt statt h1:before schreiben h1.meine_klasse:before. Statt :before kann man auch :after schreiben, wenn man Inhalt nach dem Element einfügen will.

mit content:counter(zaehler) wird der Inhalt / der Wert des Zählers vor der entsprechenden Überschrift eingefügt und danach noch ein "." . Zuletzt wird der Zähler um eins hochgezählt (counter-increment:zaehler).

Ergebnis

Anmerkung

Wichtig, damit dies auch im IE funktioniert ist das  entsprechende meta-Tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Kommentare

Name *
Code   
ChronoComments by Joomla Professional Solutions

Kommentar abgeben