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

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.

• 
• 
• 
• 
• 

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

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.

ansehen …

Weblinks

• csswg.org: CSS Lists Module Level 3 5.1. Manipulating Counters: the counter-increment, counter-set and counter-reset properties