变量作为字符动态呈现
CSS var 变量（CSS 自定义属性）很好用，然后，有时候，需要这些变量能够同时作为字符在页面中呈现，我们想到的是使用::before/::after 伪元素配合 content 属性，但是，把 CSS 变量直接作为 content 属性值是没有任何效果的。
/* 无效 */
.bar::before {
content: var(--percent);
}借助 CSS 计数器呈现 CSS var 变量值
/* 有效 */
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}也就是虽然 content 属性本身不支持变量，但是 counter-reset 属性后面的计数器初始值是支持的
实际应用案例展示
例如我们需要实现一个进度条效果，已经加载完成了部分的宽度百分比值和进度值是一样的，最好可以通过一个变量控制，这样会大大简化我们的实现。
此时，CSS var 变量非常适合使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
background-color: white;
margin: 0;
}
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>