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.

The pad descriptor of the @counter-style at-rule is used to set a minimum length for marker representations.

Syntax

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

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

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

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

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

css
@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}

Result

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also