prefix
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 prefix
, utilisé avec la règle @ @counter-style
, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.
Syntaxe
/* Valeurs de symbole */
prefix: "»";
prefix: "Page";
Valeurs
<symbol>
-
Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. 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 | "" (the empty string) |
Valeur calculée | comme spécifié |
Syntaxe formelle
prefix =
<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
@counter-style chapitres {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
prefix: "Chapitre ";
}
.exemple {
list-style: chapitres;
padding-left: 15ch;
}
HTML
<ul class="exemple">
<li>Au fond du terrier</li>
<li>La mare aux larmes</li>
<li>La course cocasse</li>
<li>L'habitation du lapin blanc</li>
<li>Conseils d'une chenille</li>
</ul>
Résultat
Spécifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-prefix |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
list-style
,list-style-image
,list-style-position
,symbols()
, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.