css进度条百分比显示：巧妙解决数值变量与字符串变量转换
本文探讨在CSS中，如何优雅地处理数值型CSS变量与字符串型变量的转换，以实现进度条百分比的动态显示。 我们以一个环形进度条为例，展示如何将数值型进度值转换为带百分号的字符串。
问题：
使用CSS变量--progress表示进度值。环形进度条的旋转角度需要数值型变量进行calc()计算；而百分比显示则需要字符串型变量。直接使用var(--progress)无法同时满足这两种需求。
原始代码（存在问题）：
立即学习“前端免费学习笔记（深入）”；
.progress-radial {
--progress: 25;
}
.progress-radial:before {
transform: rotate(calc(var(--progress)*3.6deg)) translate(0, -72.5px);
}
.progress-radial b:after {
content: var(--progress)"%"; /* 这里无法正确拼接 */
}
<div class="progress-radial">展示进度值：<b></b></div>
解决方案：
利用CSS计数器（counter-reset和counter()）实现数值到字符串的转换。
改进后的CSS代码：
.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)"%";
}
通过counter-reset: showProgress var(--progress);，将--progress的值赋给名为showProgress的计数器。content: counter(showProgress)"%";则读取计数器的值，并将其与百分号拼接，从而实现了数值到带百分号字符串的转换。 这保证了calc()函数的正常运算，并正确显示百分比。 请注意，HTML结构中需要一个<b></b>元素作为:after伪元素的作用目标。
这种方法巧妙地利用了CSS计数器的特性，避免了繁琐的JavaScript操作，实现了简洁高效的数值与字符串转换，从而完美解决了CSS进度条百分比显示的问题。
