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

BCD tables only load in the browser

Voir aussi