CSS/Funktionen/counter()

Die counter()-Funktion liest den Inhalt eines benannten CSS Zählers aus und formatiert ihn nach den Regeln eines bestimmten Listenstils. Damit können Sie Inhalte automatisch durchnummerieren. Grundlegende Erklärungen zu CSS Zählern finden Sie im verlinkten Artikel..

Parameter	name: Der Name des CSS Zählers, dessen Wert ausgegeben werden soll list-style-type ist ein optionaler Parameter, der die Darstellung der Durchnummerierung festlegt. Sie können die gleichen Angaben wie in der Eigenschaft list-style-type verwenden, auch wenn es wenig Sinn ergibt, für einen Zähler den Stil disc zu verwenden.
anwendbar auf	formal überall verwendbar, wo ein CSS-<string> Wert erwartet wird. Praktisch wird counter() aber nur innerhalb der content-Eigenschaft von Pseudoelementen akzeptiert.
Browsersupport	caniuse: mdn-css_types_counter

Beispiel

p {

 counter-increment: posMarkup;	
 position: relative;

}

p::before {

 content: counter(posMarkup);
 position: absolute;

}

Vor jeden Absatz wird mit ::before ein Pseudoelement erzeugt. Diese Pseudoelemente erhalten nun mit der content-Eigenschaft einen Inhalt - ihnen werden die Ergebnisse der counter()-Funktion zugewiesen.

Weblinks

• W3C: Outputting Counters: the counter() and counters() functions
• MDN: counter()

Siehe auch

• HTML/Tutorials/Listen/Hybride Nummerierung
• Bildergalerie mit Grid Layout, deren Kindelemente sich an den verfügbaren Platz anpassen. Zur besseren Kennzeichnung der Reihenfolge im Markup wurden sie mit counter() nummeriert.