pad

语法

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 进行填充以达到最小的两字符长度。在此示例中，已经是两个或更多字符长的计数器将正常显示，不带填充。

正式定义

正式语法

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

示例

填充计数器

此示例扩展了 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 列表和计数器模块