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
Initialer Wert"" (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

BCD tables only load in the browser

Siehe auch