在Vue项目开发过程中，经常会遇到需要根据组件状态动态调整伪元素样式的场景，比如根据数据变化修改伪元素的背景色、内容文本或者尺寸大小。伪元素本身无法直接通过Vue的模板绑定来操作，而CSS变量可以很好地解决这个问题，实现伪元素样式的动态控制。
CSS变量与伪元素的基本关系
CSS变量也就是自定义属性，是定义在CSS中的变量，可以通过var()函数在样式中引用。伪元素的样式同样可以引用CSS变量，只要我们能动态修改CSS变量的值，就能间接改变伪元素的样式表现。
需要注意的是，CSS变量的作用域是所在的DOM元素，因此如果要修改某个元素的伪元素的CSS变量，需要把变量定义在这个元素本身上，而不是父元素或者全局。
Vue中动态设置CSS变量的实现步骤
1. 在组件中定义响应式数据
首先在Vue组件的data或者setup中定义需要控制伪元素样式的响应式数据，比如我们要控制伪元素的背景色和内容：
export default {
data() {
return {
// 伪元素背景色
pseudoBgColor: '#409eff',
// 伪元素显示的内容
pseudoContent: '提示'
}
}
}
2. 在模板中动态绑定样式设置CSS变量
在模板的目标元素上，通过:style绑定把响应式数据赋值给对应的CSS变量，变量名需要以--开头：
<template>
<div class="target-box" :style="{
'--pseudo-bg': pseudoBgColor,
'--pseudo-text': `'${pseudoContent}'`
}">
目标元素
</div>
</template>
这里需要注意，如果CSS变量要作为content属性的值，赋值时需要给内容加上单引号，这样在CSS中引用的时候才会被正确识别为字符串。
3. 在CSS中定义伪元素并引用CSS变量
在组件的样式中，给目标元素定义伪元素，通过var()函数引用之前设置的CSS变量：
.target-box {
position: relative;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
.target-box::after {
content: var(--pseudo-text, '默认内容');
position: absolute;
top: -30px;
left: 0;
background-color: var(--pseudo-bg, #999);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
这里var()函数的第二个参数是默认值，当对应的CSS变量没有被定义时，会使用这个默认值。
4. 修改响应式数据触发样式更新
只要在Vue组件中修改之前定义的pseudoBgColor或者pseudoContent，CSS变量的值就会自动更新，伪元素的样式也会随之变化：
<template>
<div>
<div class="target-box" :style="{
'--pseudo-bg': pseudoBgColor,
'--pseudo-text': `'${pseudoContent}'`
}">
目标元素
</div>
<button @click="changeStyle">修改伪元素样式</button>
</div>
</template>
export default {
data() {
return {
pseudoBgColor: '#409eff',
pseudoContent: '提示'
}
},
methods: {
changeStyle() {
this.pseudoBgColor = '#f56c6c'
this.pseudoContent = '新提示'
}
}
}
注意事项
- CSS变量名区分大小写，定义和引用的时候要保持一致。
- 如果伪元素的
content属性需要动态变化，赋值时一定要给内容包裹单引号，否则CSS会无法识别字符串内容。 - CSS变量的作用域是当前元素，不要试图在父元素上定义变量来控制子元素的伪元素，除非子元素没有单独定义同名的CSS变量。
- 在scoped样式中，CSS变量同样会受作用域影响，只要变量定义在对应元素上，伪元素就可以正常引用。
适用场景
这种方式非常适合需要频繁调整伪元素样式的场景，比如：
- 根据表单验证状态修改输入框伪元素的提示内容和颜色。
- 根据数据加载状态修改加载占位元素的伪元素样式。
- 根据主题切换修改全局组件的伪元素配色。