CSS @counter-style - Pad

The pad descriptor is employed in custom counter styles to ensure that marker representations have a specified minimum length.

  • The pad descriptor adds padding to marker representations.

  • If a marker is shorter than the specified pad length, it's padded with the given symbol. Longer markers are constructed normally.

  • The pad descriptor needs an integer for minimum marker length and a symbol for padding.

  • It's useful when you want list numbers like 01, 02, 03 instead of 1, 2, 3.

Possible Values

  • <integer> && <symbol> - The <integer> sets a minimum length for all counter representations, requiring a non-negative value.

    If the minimum length is not met, the representation will be filled with the designated <symbol>.

Syntax

pad = <integer [0,∞]> && <symbol>

CSS Pad - Basic example

The following example demonstrates padding a counter.

<html>
<head>
<style>
   @counter-style unit-counter {
      system: numeric ;
      symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" ;
      pad: 3 "0";
   }
   ol {
      list-style: unit-counter;
      color: gray;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <ol>
      <li>Unit A</li>
      <li>Unit B</li>
      <li>Unit C</li>
      <li>Unit D</li>
      <li>Unit E</li>
      <li>Unit F</li>
      <li>Unit G</li>
      <li>Unit H</li>
   </ol>
</body>
</html>
Advertisements