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
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 thepad
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
Related at-rule | @counter-style |
---|---|
Initial value | 0 "" |
Computed value | as specified |
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
<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
Specification |
---|
CSS Counter Styles Level 3 # counter-style-pad |
Browser compatibility
BCD tables only load in the browser
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