css变量数字怎么转换为字符串使用？

Question

如下代码，progress使用数字则无法与百分号连接，使用字符串则无法用calc计算，如何在数字和字符串之间转换，能够同时解决两者？

.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)"%";
 }

Answer 1

通过 counter-reset 的方式来操作一下

.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>