如何实现类似number.toLocaleString()的CSS计数器样式？

原生CSS的计数器（包括@counter-style）确实没有直接支持数字区域化格式化的能力，预定义计数器样式仅覆盖符号、排序等逻辑，不处理千位分隔符这类数字格式需求。不过可以通过JavaScript + CSS变量的组合方案实现你要的效果，还能配合CSS动画完成数字递增的动画。

核心思路 #

用JavaScript处理数字的格式化（调用number.toLocaleString()实现千位分隔、区域适配），把格式化后的字符串存入CSS变量，再让CSS通过content或直接文本显示这个变量值。如果是动画需求，就在动画帧里实时计算当前数值、格式化后更新CSS变量，CSS负责过渡效果。

示例代码（适配你的数字动画需求） #

假设你要实现一个从0计数到12345的动画，区域为英文（显示12,345）：

<div class="counter"></div>

.counter {
  font-size: 24px;
  /* 用CSS变量存储格式化后的计数文本 */
  --formatted-count: "0";
}
.counter::before {
  content: var(--formatted-count);
}

const counterEl = document.querySelector('.counter');
const target = 12345;
const duration = 2000; // 动画时长2秒
const startTime = performance.now();

function updateCount(currentTime) {
  const elapsed = currentTime - startTime;
  const progress = Math.min(elapsed / duration, 1);
  // 计算当前数值
  const currentNum = Math.floor(target * progress);
  // 格式化数字，支持区域参数，比如传入'de-DE'得到12.345
  const formatted = currentNum.toLocaleString('en-US');
  // 更新CSS变量
  counterEl.style.setProperty('--formatted-count', `"${formatted}"`);
  
  if (progress < 1) {
    requestAnimationFrame(updateCount);
  }
}

requestAnimationFrame(updateCount);

静态列表计数器的适配 #

如果是静态列表（比如有序列表），同样可以用JS遍历列表项，计算每个项的索引，格式化后存入对应元素的CSS变量：

<ol class="numbered-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目1234</li>
</ol>

.numbered-list li {
  --formatted-index: "0";
  list-style: none;
}
.numbered-list li::before {
  content: var(--formatted-index) ". ";
  margin-right: 8px;
}

const listItems = document.querySelectorAll('.numbered-list li');
listItems.forEach((item, index) => {
  const formattedIndex = (index + 1).toLocaleString('en-US');
  item.style.setProperty('--formatted-index', `"${formattedIndex}"`);
});

补充说明 #

• 区域适配：toLocaleString()可以接收区域码参数，比如'de-DE'对应德语区的点分隔千位，'zh-CN'对应中文的逗号分隔，完全满足你要的区域化格式需求。
• 动画流畅度：用requestAnimationFrame驱动数值更新，能保证动画和浏览器刷新同步，避免卡顿。

内容的提问来源于stack exchange，提问作者Will P.