Mit der CSS3-Counter-Eigenschaft ist es möglich, ein beliebiges HTML-Element mit einer Nummerierung zu versehen. In den meisten Fällen reicht die einfache Nummerierung mit dem OL-Element zwar aus; allerdings sind die Gestaltungsmöglichkeiten hierbei arg eingeschränkt. Denn Nummerierung und dazugehöriger Inhalt des Listenpunktes können nur gemeinsam gestaltet werden – in Kombination mit der Counter-Eigenschaft geht es jedoch auch anders.
Liste wie gewohnt per HTML auszeichnen
Das Schöne ist, dass am HTML-Quelltext nichts geändert werden muss. Die sortierte Liste wird wie gewohnt mit dem OL-Element ausgezeichnet – das Styling erfolgt über CSS:
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
…
</ol>
Per Stylesheets entfernen wir nun die Standardnummerierung des OL-Elememtes und setzen eine neue Nummerierung mit der Eigenschaft counter-reset
. Diese erhält eine beliebige Bezeichnung, im Beispiel „liste“:
ol {
list-style: none;
counter-reset: liste;
}
Bei jeder neuen OL-Liste wird die Nummerierung des Counters „liste“ wieder auf „1“ gesetzt.
Nummerierung per Pseudo-Element gestalten
Jetzt muss der Liste noch mitgeteilt werden, welches Kindelement bei der Nummerierung berücksichtigt und wo die Nummerierung dargestellt werden soll; dies geschieht über die Pseudo-Elemente :before
oder :after
– je nachdem, wo die Nummerierung hin soll:
ol li:before {
counter-increment: liste;
}
Neben der Angabe des Counter-Namens („liste“) besteht auch die Möglichkeit, einen Zählintervall anzugeben. Standardmäßig wird bei jedem LI-Element der Zähler um eins erhöht. Man kann den Zähler beispielsweise aber auch um zwei erhöhen:
ol li:before {
counter-increment: liste 2;
}
Jetzt steht zwar fest, was wie nummeriert werden soll; eine Ausgabe der Nummerierung hat jedoch noch nicht stattgefunden. Hierzu müssen wir dem Pseudo-Element per content
-Eigenschaft die jeweilige Nummerierung des LI-Elementes hinzufügen:
ol li:before {
counter-increment: liste;
content: counter(liste);
}
Wie auch bei der Standardnummerierung des OL-Elementes ist es auch bei der Counter-Eigenschaft möglich, die Art der Nummerierung – zum Beispiel arabische Zahlen („1, 2, 3 …“) oder Buchstaben („A, B, C …“) – anzugeben:
ol li:before {
counter-increment: liste;
content: counter(liste, lower-alpha);
}
Da es sich bei der Nummerierung um ein Pseudo-Element handelt, lässt sich dieses unabhängig vom eigentlichen Inhalt des LI-Elementes gestalten. Schriften, Farben, Ränder und Abstände sind individuell gestaltbar und machen so sehr individuelle Aufzählungen möglich:
ol li:before {
counter-increment: liste;
content: counter(liste);
border: 1px solid red;
}
Im Beispiel erhält die Nummerierung einen roten Rahmen, der sich ausschließlich auf die Zählzeichen und nicht auf das gesamte LI-Element auswirkt. Da am HTML-Quelltext selbst nichts geändert werden muss, lässt sich diese Möglichkeit auch einfach bei bestehenden Seiten nachrüsten.
(dpe)
0 Antworten zu „CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft“
— was ist Deine Meinung?
Danis, oben sprichst Du von beliebigen Elementen, unten von ol, wo das Aufzählen in der Natur der Sache liegt. Ich hab es ausprobiert, es funktioniert tatsächlich mit jedem Element. Schöne Neuigkeit. Es gibt ja auch Fälle, wo man Headlines zu Kapitelnummern nummerieren will, ohne das es eine Aufzählung ist.
Du hast mir wohl gestern über die Schulter geschaut, genau die gleiche Funktion habe ich gestern auch erforscht 😉