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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft counter-increment können Sie Elemente mit Hilfe von CSS-Zählern durchnummerieren. So sind z.B. fortlaufende Kapitelnummerierungen möglich.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Beispiel ansehen …
    body {
      counter-reset: section;
    }
 
    h2 {
      counter-reset: subsection;
    }
 
    h2::before {
      counter-increment: section;
      content: "Band " counter(section) " - ";
      color: red;
    }
 
    h3::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) ": ";
      color: green;
    }

Folgende Angaben sind möglich:

  • none: (Standardwert) Keiner der Zähler wird verändert.
  • user-ident: Der Name des Zählers, der erhöht bzw. verringert werden soll.
  • integer: Der Wert, der dem Zähler hinzugefügt werden soll. Falls nicht angegeben, wird 1 verwendet.


Beachten Sie: Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML