CSS - pad

The pad descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length. If a marker representation is smaller than the specified pad length, then the marker will be padded with the specified pad symbol. Marker representations longer than the pad length are constructed as normal. Pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. A common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3...

Example

 

HTML Content

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS Content

CSS
@counter-style pad-example {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5";
    pad: 2 "0";
}
.list {
    list-style: pad-example;
}

Result

Syntax  

CSS
pad: 3 "0";

Values

<integer> && <symbol>
The <integer> specifies a minimum length that all counter representations must reach. The value must be non-negative. If the minimum length is not reached, the representation will be padded with the specified <symbol>.

Formal syntax

CSS
<a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#double_ampersand" title="Double ampersand">&&</a> <a href="css/@counter-style/pad#symbol"><symbol></a><p>where <br><code><symbol> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <ident></code></p>

Description  

The pad descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length. If a marker representation is smaller than the specified pad length, then the marker will be padded with the specified pad symbol. Marker representations longer than the pad length are constructed as normal. Pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. A common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3...

Related at-rule@counter-style
Initial value0 ""
Mediaall
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 33 (33) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 33 (33) No support No support No support

See Also  

Specifications  

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'pad' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@counter-style/pad

@counter-style CSS CSS Counter Styles CSS Descriptor Reference