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 am Anfang der Darstellung des Listenzeichenzä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>:

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

Formale Definition

Zugehörige @-Regel	`@counter-style`
Anfangswert	"" (the empty string)
Berechneter Wert	wie 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 gefolgt von einem Doppelpunkt (:). 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

Siehe auch

Andere @counter-style-Deskriptoren: system, symbols, additive-symbols, negative, suffix, range, pad, speak-as, und fallback
list-style, list-style-image, list-style-position
symbols(): die funktionale Notation zur Erstellung anonymer Zählerstile
CSS-Zählerstile Modul
CSS-Listen und -Zähler Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden