pad

Дескриптор принимает следующие два значения, разделённые пробелом, в любом порядке:

<integer>

Указывает минимальную длину, которую должны достигать все представления маркеров. Значение должно быть неотрицательным. В случае с дескриптором pad это значение также известно как длина заполнения.

<symbol>

Указывает символ, который будет использоваться для заполнения, если минимальная длина, определённая дескриптором <integer>, не достигнута. В случае с дескриптором pad это значение также известно как символ заполнения.

Используйте дескриптор pad когда вам необходимо, чтобы представления маркеров имели минимальную длину. Если представление маркера короче указанной длины заполнения, то представление маркера будет дополнено указанным символом заполнения. Представления маркеров, длиннее длины заполнения, отображаются без дополнительного заполнения.

Дескриптор pad принимает значение для минимальной длины маркера и значение для заполнения. Типичный случай использования дескриптора pad — когда вам нужен список, начинающийся с номера 01 и продолжающийся 02, 03, 04 и так далее, а не только 1, 2, 3 и 4. В этом случае, указав дескриптор pad как pad: 2 "0", браузер гарантирует, что счётчик будет иметь длину как минимум два символа и добавит заполнение 0 для достижения минимальной длины в два символа при необходимости. Счётчики, длина которых в данном примере уже два или более символов, будут отображаться нормально, без заполнения.

pad = 
  <integer [0,∞]>  &&
  <symbol>         

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

<image> = 
  <url>       |
  <gradient>  

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

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

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

Этот пример расширяет decimal system для создания счётчика, длина которого составляет как минимум три символа, заполняя счётчики меньшей длины символом 0 для достижения этой минимальной длины. Был добавлен дескриптор suffix, чтобы сделать вывод более удобочитаемым.

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li value="40">Forty</li>
  <li>Forty-one</li>
  <li value="200">Two hundred</li>
  <li value="3000">Three thousand</li>
  <li>and so on</li>
</ul>

CSS

@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}

Результат

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