如何借助 content 属性显示 CSS var 变量值

1.变量动态显示为字符

CSS var 变量（CSS 自定义属性）非常有用，但有时，您需要这些变量同时在页面上用作字符。 ::before/::after 伪元素，具有属性 content。但是，无法直接使用 CSS 变量作为 content 属性的值。任何效果。

例如：

/* 无效 */
.bar::before {
    content: var(--percent);
}

怎么说？

2。使用CSS计数器显示CSS var变量

的值，代码如下：

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}

即即使属性content本身不支持变量， -reset 属性 支持后续计数器的初始值，因此我们可以使用一个技巧让 CSS 变量 var 的值作为字符出现在页面上。

如果你对CSS计数器不太了解，可以看之前的文章：《CSS计数器详解（内容目录序号自动增加）》。

3。实际应用案例展示

比如我们需要实现一个进度条效果。加载部件宽度的百分比值等于进度值。最好通过变量来控制它，这会简化我们的流程。实现。

此时，CSS变量var就非常适合使用了。

比如下图所示的效果：

HTML的结构很简单，就是单个标签，没有嵌套：

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

关键是CSS，这里应用了CSS变量值呈现技术。 ，请参见下面以红色突出显示的代码部分：

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

您可以点击此处：CSS百分比变量和进度条演示

4。小结论

虽然是个小技巧，但是很实用。我在项目中已经使用过几次了。写这篇文章也方便大家快速查找。使用时只需复制代码并更改变量名即可。

首先开始讨论，如果您遇到其他需要动态显示变量的场景，您也可以尝试本文中的这种呈现技术。现在不需要记住，有一个印象就可以了。到时候访问我的博客，搜索“CSS变量”或者直接搜索“var”就能找到这篇文章。