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**属性和自定义记数样式一起使用时,可以用来限定记数样式的最小长度。如果某个记数样式小于 pad 所指定的长度,那么会用 pad 指定的填充字符串来填充至指定长度。如果比 pad 所指定的长度长,则会正常显示。Pad 属性的第一个参数是最小长度,第二个参数是填充字符串。一个常见的用处是序号编号需要填充两位的时候,即需要编号"01","02","03",……, 而不仅仅是 1, 2, 3...

Related at-rule@counter-style
初始值0 ""
计算值as specified

参数

css
pad: 3 "0";

参数值

<integer> && <symbol>

<integer> 表示所有计数样式必须达到的最小长度 (必须是非负整数). 如果指定的最小长度没有达到,将会用<symbol>来填充直到最小长度。

形式语法

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>* )

示例

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;
}

结果

Specifications

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

参见