Kategorien
Design HTML/CSS

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)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Antworten auf „CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft“

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.

Schreibe einen Kommentar

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