将 CSS 的变量转为字符展示在页面中

背景

在 SF 问答区中闲逛，发现了一个有趣的问题”css变量数字怎么转换为字符串使用？^[1]“。在 CSS 中如果要将文本内容展示到页面中，一般来说都是通过伪元素的 content 来实现，然而目前看到的这个提问并没有得到期望的结果。

好奇心来了

如上所述，在 CSS 的伪元素中 content 的内容将会直接展示在页面中，一般来说，我们都是通过 content 添加字符串内容来展示。但是在这里我们看到的内容却是：

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

很显然，题主想要把 --progress: 25; 这个 25 的值通过伪元素的 content 展示在页面中，看着 className 的命名，应该是作为一个进度条的数值展示。虽然不知道为什么不是把这个 --progress: 25; 作为内联属性 style 的值，通过 JS 写入来控制，比如：

<div style="--progress: 25;" class="progress-radial"></div>

正常来说，一个进度条的进度改变都是通过 JS 来控制比较多。或许题主有其他什么想法吧，这个也就只有题主他自己知道了。

但这个并不是重点，提到这点，主要是想着，如果是通过 style 属性方式写入的话，那么是不是就可以通过 attr() 方式获取到属性值呢。

<b style="--progress: 25;"></b>

不过要是这样的话，似乎也并不好，attr() 展示的属性值，所以下面这种方式就会把 --progress: 25; 全部展示出来，而不是一个 25 了。

 .progress-radial b:after {
  content: attr(style);
 }

那么在 content 这个 CSS 属性中，除了字符串、attr() 以外，还有哪些属性值呢？常见的还有 通过 url() 方式插入图片，以及近几年比较流行的 counter() 计数。

url() 的方式肯定是不行的，所以，就看看 counter() 计数函数了。在这个问题中，变量的值是一个数字，而 counter() 就是用来计数的，如果不通过 counter-increment 去累计数字，仅仅只是通过 counter-reset 将默认值 0 重置为 CSS 变量所需要的结果。

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

那么这样的话就可以得到最终想要的结果了。

当然，如果说一定要用 counter-increment 来实现的话，也不是不可以，反正这里的 <b></b> 标签元素就一个。

关于 counter()

有关 counter() 的 CSS 计数使用方式，在网络上有太多的文章，而且 MDN 上也有具体的介绍，有兴趣的可以去看看，在某些场景下还是可以用用的。

参考资料