CSS custom list counter with leading zeros and optional reverse order

README.md

The name of the class reflects the list-style-type value decimal-leading-zero.
The use of the reversed attribute reflects its use on the ol element.

References

• css counter reverse order
• css counter multiple leading zeros

index.html

<ol class="list-decimal-leading-zeros">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<!-- reversed -->
<ol class="list-decimal-leading-zeros" reversed style="--list-decimal-leading-zeros--items-count:3">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

list-decimal-leading-zeros.css

.list-decimal-leading-zeros {
    counter-reset: items 0;
}
.list-decimal-leading-zeros li {
    display: inline-block;
    counter-increment: items 1;
}
.list-decimal-leading-zeros li::before {
    content: "00" counter(items)". ";
}
.list-decimal-leading-zeros li:nth-child(n+10)::before {
    content: "0" counter(items)". ";
}
.list-decimal-leading-zeros li:nth-child(n+100)::before {
    content: counter(items)". ";
}
/* reverse count */
.list-decimal-leading-zeros[reversed] {
    counter-reset: items calc(var(--list-decimal-leading-zeros--items-count, 0) + 1);
}
.list-decimal-leading-zeros[reversed] li {
    counter-increment: items -1;
}

update_item_count.js

const $list = document.querySelector('ol[reversed]');
const count = $list.querySelectorAll('li').length;
$list.style.setProperty('--list-decimal-leading-zeros--items-count', count);