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.

Le descripteur suffix, utilisé avec la règle @ @counter-style, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera "\2E\20" (un point « . » suivi par un espace).

Syntaxe

css
/* Une valeur de type <symbol> */
suffix: "";
suffix: ") ";

Valeur

<symbol>

Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type <string>, <image> ou <custom-ident>.

Définition formelle

En lien avec les règles @@counter-style
Valeur initiale". " (full stop followed by a space)
Valeur calculéecomme spécifié

Syntaxe formelle

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>* )

Exemples

CSS

css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.exemple {
  list-style: options;
}

HTML

html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Autre</li>
</ul>

Résultat

Spécifications

Specification
CSS Counter Styles Level 3
# counter-style-suffix

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
suffix

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi