suffix
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2023.
Le descripteur CSS suffix de la règle @counter-style permet de définir le contenu qui sera ajouté à la fin de la représentation du marqueur.
Syntaxe
css
/* Valeur <symbol> : 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 | ". " (point suivi d'un espace) |
| Valeur calculée | comme défini |
Syntaxe formelle
suffix =
<symbol>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
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
| Spécification |
|---|
| CSS Counter Styles Level 3 # counter-style-suffix |
Compatibilité des navigateurs
Voir aussi
- Les descripteurs de
@counter-style:system,symbols,additive-symbols,negative,prefix,range,pad,speak-asetfallback - Propriétés de style de liste :
list-style,list-style-image,list-style-position - La fonction
symbols()pour créer des styles de compteur anonymes. - Le module de styles de compteur CSS
- Le module de listes et compteurs CSS