یکی از ویژگی‌های جذاب CSS این است که به توسعه‌دهندگان امکان می‌دهد تا لیست‌ها را با استفاده از شمارنده‌ها شخصی‌سازی کنند. شمارنده‌ها ابزارهایی پیشرفته برای ایجاد لیست‌های کاملاً سفارشی هستند که با خصوصیت @counter-style همراه است. ویژگی pad یکی از قابلیت‌های این ابزار است که به شما اجازه می‌دهد تا لیست‌های شماره‌گذاری شده با صفر یا هر کاراکتر دیگری پر شوند. این ویژگی به ویژه در طراحی‌های دقیق و منحصر به فرد مانند فهرست‌های اداری یا آموزشی مفید است.
فرض کنید می‌خواهید لیستی داشته باشید که شماره‌های آن از 001 شروع شود و به ترتیب به بالا برود. در اینجا @counter-style.pad به کار می‌آید. با استفاده از این ویژگی می‌توانیم تعداد ثابت کاراکترها را برای شمارنده تعیین کنیم، و اگر تعداد واقعی ارقام کمتر باشد، فضاهای خالی با صفر یا کاراکتر خاص دیگر پر می‌شوند.
کد نمونه برای استفاده از @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;
}
در مثال بالا، سبک شمارش my-counter تعریف شده است که از عددی استفاده می‌کند. سیستم نمایش در اینجا numeric است و نمادهایی که استفاده می‌شوند ۰ تا ۹ هستند. ویژگی pad با مقدار ۳ تعریف شده است و به ما اجازه می‌دهد که صفرها به تعداد لازم قبل از اعداد اصلی در لیست اضافه شوند تا تعداد کل کاراکترها به سه برسد.
بعد از تعریف سبک شمارنده، آن را به عنصر ul اعمال می‌کنیم تا بتواند لیست موردنظرمان را به صورت مورد نظر نمایش دهد.