`counter()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die counter() CSS-Funktion gibt einen String zurück, der den aktuellen Wert des benannten Counters darstellt, falls vorhanden.

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

Probieren Sie es aus

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

Syntax

css

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

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

Counter haben für sich genommen keine sichtbaren Effekte. Die counter()- und counters()-Funktionen machen Counter nützlich, indem sie Entwickler-definierte Strings (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 groß-/kleinschreibungssensitive Name, der mit den Eigenschaften counter-reset und counter-increment 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, wobei ein Counter-Stil-Name ein numeric, alphabetic oder symbolic vordefinierter Counter-Stil, ein komplexer Langschrift Ostasiatischer oder Äthiopischer vordefinierter Counter-Stil, oder ein anderer vordefinierter Counter-Stil ist. Wenn weggelassen, ist der Standard-Counter-Stil decimal.

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

Formale Syntax

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

<counter-name> = 
  <custom-ident>  

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

<counter-style-name> = 
  <custom-ident>  

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

lower-roman im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Counter mit den Listentilen 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 verwenden wir die counter()-Funktion dreimal.

HTML

html

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

CSS

Wir integrieren die counter()-Funktion mit drei verschiedenen Counter-Stilen, einschließlich des Standardwertes decimal. Wir haben der Liste Polsterung hinzugefügt, um Platz für den langen ::marker-String 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) "]";
}