动态修改伪元素样式

image.png

如图的导航，点击切换，下面的横线会滑动到选中的导航下。
实现步骤。

    .activ {
                &::after {
                    transition: all .5s;
                    content: '';
                    position: absolute;
                    left: var(--left);
                    bottom: -1rpx;
                    width: 80rpx;
                    height: 4rpx;
                    background-color: #017EFF;
                }
            }

首先写出横线的样式。这里通过伪元素来实现。left值没有写死，而是通过css var函数来动态修改。接下来要做的就是去动态修改这个伪元素的‘--left’属性的值了。

完整代码如下

html

                
                 
                
                    {{item.name}}
                
            

js
cheakItem(index) {
                this.cheakIndex = index
            }
css
.header {
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 2rpx solid #ddd;
            position: relative;
            .it {
                padding: 25rpx 0;
                font-weight: bold;
                width: 50%;
                text-align: center;
            }

            .activ {
                &::after {
                    transition: all .5s;
                    content: '';
                    position: absolute;
                    left: var(--left);
                    bottom: -1rpx;
                    width: 80rpx;
                    height: 4rpx;
                    background-color: #017EFF;
                }
            }
        }