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

动态修改伪类属性

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

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

这篇好文章是转载于：学新通技术网