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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prefix

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi