CSS/Funktionen/counter()

Die counter()-Funktion inkrementiert (erhöht) Werte durch CSS-Regeln, um zu verfolgen, wie oft sie benutzt worden sind. Dadurch ist es möglich Inhalt abhängig von seiner Position in der Webseite unterschiedlich darzustellen..

Parameter	name: Der Name wird durch counter-reset oder counter-increment festgelegt. list-style-type ist ein optionaler Parameter, der die Darstellung der Durchnummerierung festlegt. Es gelten alle Werte wie bei geordneten Listen.
anwendbar auf	content-Eigenschaft
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.