CSS/Funktionen/counter()
Aus SELFHTML-Wiki
< CSS | Funktionen
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 |
|
---|---|
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
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.
Liste der CSS-Funktionen
- Berechnungen und Vergleiche
- Farben und Verläufe
- intrinsische Abmessungen
- Transformationen