counter() CSS-Funktion

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

/* 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.

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

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

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

<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.

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

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Countern
• counter-reset
• counter-set
• counter-increment
• @counter-style
• CSS-counters()-Funktion
• CSS Listen und Counter-Modul
• CSS Counter-Stile-Modul
• CSS generierte Inhalte-Modul