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

最新推荐文章于 2024-09-23 15:37:37 发布

月下脆竹書閣

最新推荐文章于 2024-09-23 15:37:37 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/c_x_m/article/details/126930401

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

动态修改伪类属性

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

在这里插入图片描述

<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;       
    }
}