Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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 CSS suffix de la règle @counter-style permet de spécifier le contenu qui sera ajouté à la fin de la représentation du marqueur.

Syntaxe

css
/* Valeur <symbol>&nbsp;: chaîne de caractères, image ou identifiant */
suffix: "";
suffix: ") ";
suffix: url("bullet.png");

Valeurs

Le descripteur suffix accepte comme valeur un seul <symbol> :

<symbol>

Spécifie un <symbol> qui est ajouté à la fin de la représentation du marqueur. Il peut s'agir d'une <string>, d'une <image> ou d'un <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

Définir un suffixe pour un compteur

HTML

html
<ul class="choices">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Aucun des choix ci-dessus</li>
</ul>

CSS

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

.choices {
  list-style: options;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi