CSS-Counter: Nummerierungen für HTML-Elemente

Mit dem CSS-Counter lassen sich beliebige HTML-Elemente nummerieren.

Hier ein Beispiel:

HTML-Angabe

Ich empfehle dafür eine eigene CSS-Klasse (z.B.: "beispiel") anzulegen, damit andere HTML-Elemente nicht mitzählen.

<div class="beispiel">
 <p> David Brittain </p>
 <p> Ruslan Belkin </p>
 <p> Mohomodou Houssouba </p>
 <p> Shuichiro Inomata </p>
 <p> Margaret Melton </p>
</div>

Counter einrichten

Für das <div>-Element mit der Klasse: "beispiel" wird ein neuer Counter „platz”, angelegt:

div.beispiel {
 counter-reset: platz;
}

Über die CSS-Eigenschaft counter-reset wird der Counter angelegt und auf Null gesetzt.

Counter weiter zählen

Im nächsten Schritt wird festgelegt, bei welchem HTML-Element der Counter „platz”, weiter zählen soll, in diesem Beispiel ist es das <p>-Element:

div.beispiel p {
 counter-increment: platz;
}

Mit der CSS-Eigenschaft counter-increment wird der Counter erhöht.

Counter darstellen

Jetzt wird der Counter vor dem <p>-Element eingefügt.

div.beispiel p::before {
 content: counter(platz) ". ";
 color: Blue;
}

Fertig!

Das komplette Script

<style>
div.beispiel {
 counter-reset: platz;
}

div.beispiel p {
 counter-increment: platz;
}

div.beispiel p::before {
 content: counter(platz) ". ";
 color: Blue;
}
</style>

...

<div class="beispiel">
 <p> David Brittain </p>
 <p> Ruslan Belkin </p>
 <p> Mohomodou Houssouba </p>
 <p> Shuichiro Inomata </p>
 <p> Margaret Melton </p>
</div>

Anpassen

Ändern Sie die Angaben, dadurch kann die Ausgabe des Counters anders dargestellt werden, hier zwei Beispiele:

div.beispiel p::before {
 content: "Platz " counter(platz) ": ";
 color: Gold;
 font-weight: Bold;
}

div.beispiel p::after {
 content: " (" counter(platz) ")";
 color: Violet;
}