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 Regel @counter-style
gibt den Inhalt an, der am Ende der Markerdarstellung 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>
:
<symbol>
-
Gibt ein
<symbol>
an, das an die Markerdarstellung angehängt wird. Es kann eine<string>
, ein<image>
oder ein<custom-ident>
sein.
Formale Definition
Zugehörige @-Regel | @counter-style |
---|---|
Anfangswert | ". " (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
>Ein Suffix für einen Zähler festlegen
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
Loading…
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 Counter Styles Modul
- CSS Lists and Counters Modul