vue组件利用css var(--变量)实现动态修改伪类属性（::before、::after）

动态修改伪类属性

最新推荐文章于 2025-09-24 13:11:02 发布

原创最新推荐文章于 2025-09-24 13:11:02 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #前端

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Vue.js动态修改伪元素属性的方法，通过条件判断实现不同状态下的视觉反馈效果。具体而言，该方法根据用户的登录状态改变绿色或灰色圆点的显示，从而直观地指示用户的登录状态。

动态修改伪类属性

需求:用户已登录为绿色圆点，未登录为灰色圆点

在这里插入图片描述

<div 
   class="tag-horizontal" 
   :style="{'--bgColor':item?.user?'#1fdb7d':'#a9abb9'}"
 >
 </div>

.tag-horizontal {
    &::before{
        content: "";       
        position: absolute;
        left: 0.4rem;
        top: 0.45rem;
        width: 0.7rem;
        height: 0.7rem;
        background-color: var(--bgColor);
        border-radius: 50%;
        box-shadow: inset 2px 0 2px #3e6d81;       
    }
}