CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft

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)