Дескриптор CSS-правила `prefix`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с сентября 2023 года.

Дескриптор prefix правила @counter-style задаёт содержимое, которое будет добавлено в начало представления маркера счётчика.

Если значение счётчика отрицательное, prefix располагается перед знаком минус и любыми другими <symbol>s, добавленными дескриптором negative.

Синтаксис

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

Значения

Дескриптор prefix принимает в качестве значения один <symbol>:

<symbol>: Задаёт <symbol> — <string>, <image> или <custom-ident>, — который добавляется перед представлением маркера.

Формальное определение

Формальный синтаксис

Примеры

Добавление префикса к счётчику

В этом примере перед каждым числом счётчика добавляется «Book » (с пробелом), а после него — двоеточие (:). Двоеточие добавляется с помощью дескриптора suffix.

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

Результат

Спецификации

Спецификация
CSS Counter Styles Level 3 # counter-style-prefix

Совместимость с браузерами

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`prefix`	91	91	33	77	17	91	33	64	17	16.0	91	17

См. также

Другие дескрипторы @counter-style: system, symbols, additive-symbols, negative, suffix, range, pad, speak-as и fallback
list-style, list-style-image, list-style-position
symbols(): функциональная нотация для создания анонимных стилей счётчика
Модуль стилей счётчиков CSS
Модуль списков и счётчиков CSS

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@counter-style/prefix