pad

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.

pad 記述子を使用すると、マーカー表現に最小限の長さが必要な場合に、カスタムカウンターのスタイル定義を行うことができます。

構文

css
pad: 3 "0";

値

<integer> && <symbol>

<integer> で、すべてのカウンター表現が到達しなければならない最小の長さを指定します。負の値は使用できません。最小の長さに達しない場合は、指定した <symbol> で埋め尽くされます。

解説

マーカー表現が指定されたパッド長より短い場合、指定されたパッド記号で埋められます。パッド長より長いマーカ表現は、通常通り構築される。 pad 記述子では、最小マーカー長を整数で、パッドに使用する記号を第 2 引数として指定します。 pad 記述子の一般的な使用法は、リストが 1、2、3... ではなく、 01 から始まって 02、03... と続くような番号付けが必要な場合です。

公式定義

関連するアット規則@counter-style
初期値0 ""
計算値指定通り

形式文法

<integer> && <symbol>

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

例

カウンターをゼロ埋めにする

HTML

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

CSS

css
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}

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

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報