伪元素显示变量值的方法

1. 使用attr引用父元素属性

<li data-name="小明">

li::after {
    content: attr(data-name);
}

2. 非content属性可以直接引用css变量

<li style="--width: 40px"></li>

li::after {
    content: attr(data-name);
    width: var(--width)
}

3. content属性显示字符串

<li style="--percent: '40' "></li>

li::after {
    content: var(--percent)
}

4. content属性显示数字，可以使用计数器引用

<li style="--percent: 40"></li>

li::after {
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
}