Creating a custom CSS counter-style reminiscent of the toLocaleString function

Question

Creating a custom CSS counter-style reminiscent of the toLocaleString function

Is there a way to customize the list counter style to display commas in the thousands place, similar to number.toLocaleString()? Or perhaps even adjust based on locale to show either 1,234 or 1.234?

I have checked the Predefined counter styles but did not find anything that fits this requirement.

The goal is to incorporate CSS animations to create an animated counter like the one demonstrated here: https://codepen.io/wp-asdf123/pen/XWLVPyy. It would be ideal for the output to include commas (or be locale-specific).

It appears that using @counter-style within the

content: counter(num /*, counter-style? */ );

might be the solution, but I'm not entirely clear on how to implement it.

Any assistance on this matter would be highly appreciated. Thank you.

css css-animations html-lists

Answer 1

Answer №1

It is almost necessary to use JavaScript in order to achieve this goal. MDN lists all supported descriptors, but none of them allow for achieving this directly or indirectly, especially when only using commas without considering locale.

One potential solution could be to use a fixed set of symbols, but the number of symbols required would likely be too large.

An alternative workaround using pure CSS could involve using 2 (or more) counters to control each 3-digit segment withpad: 3 "0". However, this method has limitations as it will only work if the counter increment is fixed and if the initial count is 0 or a positive number divisible by 10. Below is an example using just 2 counters, where the counter increases by 100 for each list item. This setup only supports numbers from 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>

Answer 2

It is almost necessary to use JavaScript in order to achieve this goal. MDN lists all supported descriptors, but none of them allow for achieving this directly or indirectly, especially when only using commas without considering locale.

One potential solution could be to use a fixed set of symbols, but the number of symbols required would likely be too large.

An alternative workaround using pure CSS could involve using 2 (or more) counters to control each 3-digit segment withpad: 3 "0". However, this method has limitations as it will only work if the counter increment is fixed and if the initial count is 0 or a positive number divisible by 10. Below is an example using just 2 counters, where the counter increases by 100 for each list item. This setup only supports numbers from 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>

Creating a custom CSS counter-style reminiscent of the toLocaleString function

Answer №1

Similar questions

Using Angular material to display a list of items inside a <mat-cell> element for searching

Adjusting Font Size of Menu BarORModifying

What could be the reason behind the additional gap at the bottom on mobile devices?

Guide for positioning buttons in front of an image using HTML and CSS

How can I alter the background color using Jquery or CSS3?

Exciting Findings of Grid in Bootstrap 4 Alpha-6

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

Is it possible to reference the same PHP file in multiple locations?

Introducing an alternative solution for handling tasks linked to the completion of CSS3 animations

Responsive CSS Fluid Grid Design Encounters a Tablet Break Point Failure

Setting the second tab as the primary active tab

I'm curious if it's possible to create a scrolling marquee on an SVG path with the use of HTML and CSS?

Switch the scroll direction in the middle of the page and then switch it back

What could be the reason for the css problems being caused by my flash banner?

developing a responsive website that can effortlessly adjust to any screen size, whether big or small

Place the element at the bottom of the row above

Segment the progress bar into sections

How to target CSS when a DIV does not have a particular sibling

The size of table td is less than 100%

"Looking to add some flair to your website with a