prefix

Baseline 2023

Neu verfügbar

Seit September 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Der prefix Deskriptor der @counter-style Regel spezifiziert Inhalte, die dem Anfang der Markerdarstellung des Zählers hinzugefügt werden.

Wenn der Zählerwert negativ ist, kommt der 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 einziges <symbol>:

<symbol>: Spezifiziert ein <symbol> — eine <string>, ein <image> oder ein <custom-ident> — das der Markerdarstellung 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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

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

In diesem Beispiel wird jeder Zählernummer "Buch " (mit einem Leerzeichen) vorangestellt und ein Doppelpunkt (:) angehängt. 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

Spezifikation
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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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