Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/generierter Inhalt/Nummerierung/counter-reset

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | generierter Inhalt‎ | Nummerierung(Weitergeleitet von Counter-reset)
Wechseln zu: Navigation, Suche

Mit der Eigenschaft counter-reset können Sie Zähler starten oder zurücksetzen. Diese Zähler können dann z.B. fortlaufende Kapitelnummerierungen erzeugen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: (Standardwert) Keiner der Zähler wird verändert.
  • Name: Der Name des Zählers, der zurückgesetzt, bzw. gestartet werden soll.
  • Nummer: Der Wert, auf den der Zähler zurückgesetzt werden soll. Falls nicht angegeben, wird 0 verwendet.
  • initial: wird auf Standardwert zurückgesetzt
  • inherit: Einstellungen werden vom Elternelement übernommen

Anwendungsbeispiel[Bearbeiten]

Zählung von Absätzen ansehen …
body {
  counter-reset: posMarkup 0;  
}  

p {
  position: relative;
}

p::before {
  counter-increment: posMarkup;	
  content: counter(posMarkup, upper-roman);
  position: absolute;
}
Das body-Element erhält mit counter-reset: posMarkup 0; eine Festlegung für einen ZählerposMarkup, der bei 0 beginnt und für die ganze Webseite gilt.

Der Absatz p erhält nun mit ::before ein Pseudoelement. Die Erhöhung des Zählwerts durch counter-increment findet nun nicht mehr im Absatz, sondern gleich im Pseudoelelement statt.

Über content werden die Ergebnisse der counter()-Funktion ausgegeben. Dabei wird hier zusätzlich zum Namen der list-style-type upper-roman angegeben, sodass anstelle des Standardwerts decimal mit Dezimalzählung hier römische Ziffern verwendet werden.

Weblinks[Bearbeiten]