counter()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die counter() CSS Funktion gibt eine Zeichenkette zurück, die den aktuellen Wert des benannten Counters darstellt, falls vorhanden.

Die Funktion counter() wird in der Regel innerhalb von Pseudo-Elementen durch die content Eigenschaft verwendet, aber theoretisch kann sie überall dort eingesetzt werden, wo ein <string> Wert unterstützt wird.

Probieren Sie es aus

Syntax

css

/* Basic usage */
counter(counter-name);

/* changing the counter display */
counter(counter-name, upper-roman)

Counter haben für sich genommen keine sichtbare Wirkung. Die counter() und counters() Funktionen machen Counter nützlich, indem sie entwicklerdefinierte Zeichenfolgen (oder Bilder) zurückgeben.

Werte

Die counter() Funktion akzeptiert bis zu zwei Parameter. Der erste Parameter ist der <counter-name>. Der optionale zweite Parameter ist der <counter-style>.

<counter-name>: Ein <custom-ident>, der den Counter identifiziert, derselbe schreibweise-sensible Name, der mit den counter-reset und counter-increment Eigenschaftswerten verwendet wird. Der Counter-Name darf nicht mit zwei Bindestrichen beginnen und kann nicht none, unset, initial oder inherit sein.
<counter-style>: Ein <list-style-type> Name, <@counter-style> Name oder symbols() Funktion, bei der ein Counter-Stil ein numeric, alphabetic oder symbolic einfacher vordefinierter Counter-Stil, ein komplexer Langstil ostasiatischer oder äthiopischer vordefinierter Counter-Stil oder ein anderer vordefinierter Counter-Stil ist. Wenn weggelassen, ist der Counter-Stil standardmäßig decimal.

Hinweis: Um die Counter-Werte beim Verschachteln von Countern zu verbinden, verwenden Sie die counters() Funktion, die einen zusätzlichen <string> Parameter bereitstellt.

Formale Syntax

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

lower-roman im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Counter mit den List-Stilen lower-roman und lower-alpha.

HTML

html

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Ergebnis

Anzeige eines Counters mit drei Stilen

In diesem Beispiel nutzen wir die counter() Funktion dreimal.

HTML

html

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

Wir verwenden die counter() Funktion mit drei verschiedenen Counter-Stilen, einschließlich des Standardwertes "decimal". Wir haben der Liste einen Abstand hinzugefügt, um Platz für die lange ::marker Zeichenkette zu schaffen.

css

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

Ergebnis

Spezifikationen

Specification
CSS Lists and Counters Module Level 3 # counter-functions

Browser-Kompatibilität

BCD tables only load in the browser