如何在Vue中动态为:before、:after伪元素绑定CSS样式

原有写法失效核心原因：

1. <style> 标签不允许写在 v-for 循环内部，浏览器渲染时会自动将所有 <style> 标签提取到文档头部，完全脱离Vue的渲染上下文，无法读取循环内的 t.color 变量
2. 原生CSS无法直接读取Vue的响应式数据，需要通过桥接方式传递动态值

方案1：CSS自定义属性（最推荐，全版本兼容） #

通过在DOM节点上绑定自定义CSS变量，将动态颜色传递给CSS，伪元素直接读取变量值即可。

模板代码 #

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length" :key="i">
    <div class="_tmln_shdl_itm_lft">
        <p :style="`color:${t.color}`">{{t.time}}</p>
    </div>
    <!-- 给目标元素的父级绑定自定义CSS变量 -->
    <div class="_tmln_shdl_itm_r8_one" :style="`--dynamic-after-color: ${t.color}`">
        <h4>对应内容</h4>
    </div>
<div>

样式代码（写在组件全局的<style>标签内，不要放在v-for循环里） #

._tmln_shdl_itm_r8_one h4:after{
    color: var(--dynamic-after-color);
    /* 其余你需要的伪元素样式保持不变 */
}

方案2：替换伪元素为真实DOM（逻辑最直观） #

如果不想处理CSS变量，可以直接把原本要写在:after伪元素里的内容，替换为真实的<span>标签，直接绑定动态样式即可：

<h4>
    原有内容
    <span class="after-element" :style="{color: t.color}"></span>
</h4>

后续把原先写在h4:after上的样式全部迁移到.after-element类上即可正常生效。

方案3：Vue3专属v-bind语法 #

如果项目使用Vue3，可以直接在<style scoped>中使用Vue内置的v-bind语法绑定响应式变量，适合非循环场景的伪元素动态样式绑定。

内容的提问来源于stack exchange，提问作者Hkm Sadek