CSS @counter-style similar to toLocaleString

Is it possible to have a list counter style that behaves like number.toLocaleString()? Or at the very least, show commas in the thousands places?

Basically to show like 1,234 (or ideally 1.234 depending on locale?)

I don't see anything like that as a Predefined counter style

What I'm really trying to do is to use CSS animations to animate a counter, ex here: https://codepen.io/wp-asdf123/pen/XWLVPyy - and I would like for it to show with commas (or ideally locale-correct) in the output.

It seems like the way to do it is with @counter-style in the content: counter(num /*, counter-style? */ ); part, but I'm not 100% clear on that.

Any help is greatly appreciated, thank you

Solution

Using JS is pretty much required. All supported descriptors are listed in MDN, and non of these directly or non-directly allows this goal to be achieved, even if only using comma without considering locale .

From what I see using a huge fixed set of symbols is a potential solution, but then the number of symbols needed to be defined will obviously be too large.

One possible, but very limited pure CSS workaround I can think of is to use 2 (or more) counters controlling each 3-digit segmant with pad: 3 "0". This idea is very limited because it will only work if the counter increment is fixed, and is a number being 1 or divisible by 10. The initial count needs to be 0 or positive as well. See below example using only 2 counters, and the counter is fixed to increase 100 for each list item. Since these is only 2 counters, it supports only 0 to 9,999.

@counter-style hundres-paded {
  system: extends decimal;
  pad: 3 "0";
}

.item:first-child {
  counter-reset: hundreds 0;
}

.item:not(:first-child) {
  counter-increment: hundreds 100;
}

.item:nth-child(10n+11) {
  counter-reset: hundreds 000;
  counter-increment: thounsands 1;
}

.item::before {
  content: counter(hundreds);
}

.item:nth-child(n+11)::before {
  content: counter(thounsands) "," counter(hundreds, hundres-paded);
}

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>