prefix

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