CSS counter() Funktion

Definition und Verwendung

counter() Die Funktion gibt den aktuellen Wert des angegebenen Zählers als Zeichenkette zurück.

Beispiel

Beispiel 1

Erstellen Sie für die Seite einen Zähler (im body-Selektor). Erhöhen Sie den Zählerwert für jeden <h2>-Element und fügen Sie vor jedem <h2>-Element den Text "Kapitel Nummer" hinzu:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Abschnitt " counter(section) ": ";
}

Versuchen Sie es selbst

Beispiel 2

Stellen Sie den Stil des Zählers ein:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Abschnitt " counter(section, upper-roman) ": ";
}

Versuchen Sie es selbst

CSS-Syntax

counter(countername, counterstyle)
Wert Beschreibung
countername

Erforderlich. Der Name des Zählers (entspricht dem Namen, der in den Attributen counter-reset und counter-increment verwendet wird).

Beachten Sie, dass die Namen in Groß- und Kleinschreibung unterscheidet werden.
counterstyle

Optional. Der Stil des Zählers (kann der Wert von list-style-type, der Name von @counter-style oder die Funktion symbols() sein).

Standardwert ist Dezimal.

Technische Details

Version: CSS3

Browser-Unterstützung

Chrome Edge Firefox Safari Oper
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

Anleitung:CSS Zähler

Referenz:CSS content Eigenschaft

Referenz:CSS counter-increment Eigenschaft

Referenz:CSS counter-reset Eigenschaft

Referenz:CSS @counter-style Regel

Referenz:CSS counters() Funktion