<ol class="list--">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ol>
<ol class="list--{{ name }}">
{{#each listItems as |item|}}
<li>{{ item.text }}</li>
{{/each}}
</ol>
{
"listItems": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
}
]
}
@counter-style circled-decimal {
system: fixed 0;
symbols: '\24EA' '\2460' '\2461' '\2462' '\2463' '\2464' '\2465' '\2466' '\2467' '\2468' '\2469' '\246A' '\246B' '\246C' '\246D' '\246E' '\246F' '\2470' '\2471' '\2472' '\2473' '\3251' '\3252' '\3253' '\3254' '\3255' '\3256' '\3257' '\3258' '\3259' '\325a' '\325b' '\325c' '\325d' '\325e' '\325f' '\32b1' '\32b2' '\32b3' '\32b4' '\32b5' '\32b6' '\32b7' '\32b8' '\32b9' '\32ba' '\32bb' '\32bc' '\32bd' '\32be' '\32bf';
suffix: ' ';
}
@counter-style decimal-leading-zero {
system: fixed;
symbols: '\30\30' '\30\31' '\30\32' '\30\33' '\30\34' '\30\35' '\30\36' '\30\37' '\30\38' '\30\39';
}
@counter-style dotted-decimal {
system: fixed;
symbols: '\2488' '\2489' '\248A' '\248B' '\248C' '\248D' '\248E' '\248F' '\2490' '\2491' '\2492' '\2493' '\2494' '\2495' '\2496' '\2497' '\2498' '\2499' '\249A' '\249B';
suffix: ' ';
}
@counter-style filled-circled-decimal {
system: fixed;
symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e' '\277f' '\24EB' '\24EC' '\24ED' '\24EE' '\24EF' '\24F0' '\24F1' '\24F2' '\24F3' '\24F4';
suffix: ' ';
}
ol {
list-style: decimal
}
ol li::marker {
font-size: 125%;
color: var(--oklch-color-violet);
}
.list--circled-decimal {
list-style-type: circled-decimal;
}
.list--decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.list--dotted-decimal {
list-style-type: dotted-decimal;
}
.list--filled-circled-decimal {
list-style-type: filled-circled-decimal;
}
ol {
list-style: decimal
}
The decimal list with leading 0 needs to start from 1, not 0
The lists in this example leverage the counter-style
at-rule to create customized numbering schemes.