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... と続くような番号付けが必要な場合です。

公式定義

形式文法

<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pad

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報