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

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

See also