pad CSS at-rule descriptor

Syntax

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

Values

The descriptor accepts the following two values, which are separated by a space and can be specified in any order:

<integer>

Specifies the minimum length that all marker representations must reach. The value must be non-negative. In the case of the pad descriptor, this value is also known as the pad length.

<symbol>

Specifies the symbol to be used for padding if the minimum length defined by the <integer> is not reached. In the case of the pad descriptor, this value is also known as the padding symbol.

Description

Use the pad descriptor when you need the marker representations to be of a minimum length. If a marker representation is shorter than the specified pad length, then the marker representation will be padded with the specified padding symbol. Marker representations longer than the pad length are displayed without any additional padding.

The pad descriptor takes an <integer> for the minimum marker length and a <symbol> for the padding. A common use case of the pad descriptor is when you need a list to start numbering from 01 and go through 02, 03, 04, and so on, instead of just 1, 2, 3, and 4. By specifying the pad descriptor as pad: 2 "0" in this case, the browser ensures to make the counter at least two characters long and adds a padding with 0 to reach the minimum two-character length where needed. Counters that are already two or more characters long in this example will be displayed normally, without padding.

Formal definition

Formal syntax

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

<integer> = 
  <number-token>  

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

Examples

Padding a counter

This example extends the decimal system to create a counter that is at least three characters long, padding shorter counters with 0 to reach that minimum length. A suffix descriptor has been added to make the output more legible.

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

Result

Specifications

Browser compatibility

See also

• @counter-style descriptors: system, symbols, additive-symbols, negative, prefix, suffix, range, speak-as, fallback
• List style properties: list-style, list-style-image, list-style-position
• symbols() function to create anonymous counter styles
• CSS counter styles module
• CSS lists and counters module