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> : 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ée | comme 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
Loading…
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