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

Дескриптор pad правила @counter-style используется для задания минимальной длины представлений маркеров.

Синтаксис

pad: 3 "0";
pad: "+" 5;

Значения

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

<integer>

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

<symbol>

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

Описание

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

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

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

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

Примеры

Заполнение счётчика

В этом примере расширяется 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