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

css
/* 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éecomme 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

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

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