css 变量数字如何优雅地转变为字符串？

在使用 CSS 变量时，我们经常会遇到数字和字符串之间转换的需求。比如当我们需要将数字用于计算时，却无法将其连接到字符串上；反之，当需要将变量作为字符串显示时，又无法使用计算操作。

为了解决这一难题，我们可以利用 CSS 的 counter-reset 属性。该属性允许我们定义一个计数器并将其应用于特定元素。我们可以通过以下の步骤来解决问题：

1. 定义一个计数器，并将其初始化为变量值：

   

   CSS

   CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

   下载

   .progress-radial b:after {
    counter-reset: showProgress var(--progress);
   }

2. 将计数器用作字符串：

   立即学习“前端免费学习笔记（深入）”；

   .progress-radial b:after {
    content: counter(showProgress) "%";
   }

   通过这种方式，我们可以将数字变量 --progress 轻松地转换为字符串，并将其用于计算和显示中，解决了两种需求。以下是一个完整的示例代码：

.progress-radial {
    --progress: 25;
}

.progress-radial:before {
    transform: rotate(calc(var(--progress)*3.6deg)) translate(0, -72.5px);
}

.progress-radial b:after {
    counter-reset: showProgress var(--progress);
    content: counter(showProgress) "%";
}

<div class="progress-radial">展示进度值：<b></b></div>