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.

Der prefix Deskriptor der @counter-style Regel spezifiziert den Inhalt, der zum Beginn der Darstellung des Markenzeichens des Zählers hinzugefügt wird.

Wenn der Zählerwert negativ ist, kommt das prefix vor dem Minuszeichen und allen anderen <symbol>en, die durch den negative Deskriptor hinzugefügt werden.

Syntax

css
/* <symbol> value: string, image, or identifier */
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);

Werte

Der prefix Deskriptor nimmt als Wert ein einzelnes <symbol> an:

<symbol>

Gibt ein <symbol> an — einen <string>, ein <image> oder einen <custom-ident> — das der Darstellung des Markenzeichens vorangestellt wird.

Formale Definition

Zugehörige @-Regel@counter-style
Anfangswert"" (the empty string)
Berechneter Wertwie angegeben

Formale Syntax

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>* )

Beispiele

Hinzufügen eines Präfixes zu einem Zähler

In diesem Beispiel wird jeder Zählernummer "Book " (mit einem Leerzeichen) vorangestellt und mit einem Doppelpunkt (:) gefolgt. Der Doppelpunkt wird mit dem suffix Deskriptor hinzugefügt.

HTML

html
<ol class="books">
  <li>Flamer, by Mike Curato</li>
  <li>Gender Queer: A Memoir, by Maia Kobabe</li>
  <li>Tricks, by Ellen Hopkins</li>
  <li>The Handmaid's Tale: The Graphic Novel, by Margaret Atwood</li>
  <li>Crank, by Ellen Hopkins</li>
</ol>

CSS

css
@counter-style books {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Book ";
  suffix: ": ";
}

.books {
  list-style: books;
  padding-left: 15ch;
}

Ergebnis

Spezifikationen

Specification
CSS Counter Styles Level 3
# counter-style-prefix

Browser-Kompatibilität

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

Siehe auch