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.

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

css
/* <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

Related at-rule@counter-style
Initial value"" (the empty string)
Computed valueas specified

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

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

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

Result

Specifications

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

Browser compatibility

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

See also