`prefix` CSS at-rule descriptor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since September 2023.

The @counter-style rule's prefix descriptor specifies content that will be added to the beginning of the counter's marker representation.

When the counter value is negative, the prefix comes before the negative sign and any other <symbol>s added by the negative descriptor.

Syntax

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

Values

The prefix descriptor takes as its value a single <symbol>:

<symbol>: Specifies a <symbol> — a <string>, <image>, or <custom-ident> — that is prepended to the marker representation.

Formal definition

Formal syntax

Examples

Adding a prefix to a counter

In this example, each counter number is prefixed by "Book " (with a space) and followed by a colon (:). The colon is added with the suffix descriptor.

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

@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;
}

Result

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`prefix`	91	91	33	77	17	91	33	64	17	16.0	91	17