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.
Last active
January 27, 2023 10:05
-
-
Save mynyml/1575f6a98ade10413bc3e968b66023be to your computer and use it in GitHub Desktop.
CSS custom list counter with leading zeros and optional reverse order
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const $list = document.querySelector('ol[reversed]'); | |
const count = $list.querySelectorAll('li').length; | |
$list.style.setProperty('--list-decimal-leading-zeros--items-count', count); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment