символы

Описание symbols задаётся как список одного или более значений <symbol>, разделённых пробелами.

<symbol>

Определяет символ, используемый в системе счёта. Каждый символ в списке может быть либо <string>, либо <image>, либо <custom-ident>. Значение <image>, в свою очередь, может быть задано как <url> или <gradient>.

Символ может быть строкой, изображением или идентификатором. Он используется внутри правила @counter-style at-rule.

Когда значение описания system равно cyclic, numeric, alphabetic, symbolic, или fixed, необходимо указать описание symbols. Для системы additive используйте описание additive-symbols для задания символов.

Хотя пробел между символами в кавычках не обязателен, он делает CSS более читабельным. Чтобы использовать кавычку в качестве символа, либо экранируйте символ кавычки, либо заключите его в разные кавычки, например, "'".

При определении символов с помощью идентификаторов вместо строк, убедитесь, что используются правила синтаксиса идентификаторов. Например, как отмечено выше, ASCII-символы, не являющиеся буквами, такие как * не являются идентификаторами и должны быть либо заключены в кавычки, либо экранированы. Шестнадцатеричные экранированные символы следуют за пробелом. Этот пробел может выглядеть как пробел, разделяющий два идентификатора, но он позволяет цифрам следовать за шестнадцатерично экранированными символами. Это означает, что после шестнадцатерично экранированного идентификатора необходимо включить два пробела для отделения его от следующего идентификатора. Например, лучше использовать строку "\2A 1" вместо \2A 1 с двумя пробелами, так как инструменты форматирования кода могут удалить двойные пробелы. В целом безопаснее использовать кавычки для идентификаторов, требующих экранирования, или использовать строки.

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

В этом примере список значений для описания symbols включает буквы (A, D, E), число в кавычках ("1"), и шестнадцатеричный экранированный идентификатор в кавычках ("\24B7") для символа Ⓑ.

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Результат

• @counter-style описания: system, additive-symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Стили списка: list-style, list-style-image, list-style-position
• symbols() функция
• <url> тип
• Модуль CSS counter styles