CSS/Funktionen/counter()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch