suffix
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der suffix
Deskriptor der @counter-style
Regel gibt den Inhalt an, der am Ende der Marker-Darstellung hinzugefügt wird.
Syntax
css
/* <symbol> value: string, image, or identifier */
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
Werte
Der suffix
Deskriptor nimmt als Wert ein einzelnes <symbol>
an:
<symbol>
-
Gibt ein
<symbol>
an, das an die Marker-Darstellung angehängt wird. Es kann sich um ein<string>
,<image>
oder<custom-ident>
handeln.
Formale Definition
Zugehörige @-Regel | @counter-style |
---|---|
Initialer Wert | ". " (full stop followed by a space) |
Berechneter Wert | wie angegeben |
Formale Syntax
suffix =
<symbol>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Einstellen eines Suffixes für einen Zähler
HTML
html
<ul class="choices">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>None of the above</li>
</ul>
CSS
css
@counter-style options {
system: fixed;
symbols: A B C D;
suffix: ") ";
}
.choices {
list-style: options;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Counter Styles Level 3 # counter-style-suffix |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere
@counter-style
Deskriptoren:system
,symbols
,additive-symbols
,negative
,prefix
,range
,pad
,speak-as
, undfallback
list-style
,list-style-image
,list-style-position
symbols()
: die funktionale Notation zur Erstellung anonymer Zählerstile- CSS-Zählerstile Modul
- CSS-Listen und Zähler Modul