One of the fascinating features of CSS is that it allows developers to customize lists using custom counters. Counters are advanced tools for creating entirely customized lists that are accompanied by the @counter-style property. The pad feature is one of the capabilities of this tool that allows you to pad the numbered lists with zero or any other specified character. This feature is especially useful in precise designs and in lists specific to individual's needs, such as administrative or educational lists.
Assume you want a list that starts with numbers from 001 and increases sequentially. Here, @counter-style.pad is utilized. By using this feature, we can define a fixed number of characters for the counter and, if the actual number of characters is less, the excess spaces will appear as zero or any other specified character.
Example Code for Using @counter-style.pad
@counter-style my-counter {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
pad: 3 "0";
}
ul {
list-style: my-counter;
}
In the above example, the counting style my-counter has been defined, which uses a numeric system. The numeric is denoting the display system here and the symbols being used are from 0 to 9. The pad property determines the amount of padding, allowing the zeros to be added before the actual numbers in the list to meet the total number of specified characters.
After defining the counting style, you can apply it to the ul element so that it can display the list as desired.