js动态修改after，before的content内容，以及动态修改单个after，before的属性

修改content内容

关于js动态修改after之类的伪类的content内容可以通过在标签上添加data-内容自填的属性，然后就可以在css中使用attr(data-内容自填)方法进行使用

<div class="after" data-content="content的内容"></div>
<style>
    .after::after{
        content: attr(data-content);
    }
</style>

 这个用起来还好，通过动态修改属性的内容就可以改变伪类内content的值了

修改属性值

可以通过在标签内加css变量来改变

<div class="tabHead" :style="{'--left': (positionList[index]?positionList[index]:25)+'px'}" ></div>
<!-- '--left'就是css变量，后面是它所带的值 -->
<style>
.tabHead::after{
    content: '';
    width: 40px;
    height: 2px;
    left：var(--left);
    background-color: red;
}
</style>

这段使用vue写的，操作dom的style的内容就行了，这变量可以动态添加修改也是雷到我了。

修改’--left‘的值就可以改变after内的值了，这个方法就是不适合与多个一样但独立的after，但是用于操控单个after倒是非常好用，因为一个变量只能控制一个属性且不独立，需要独立控制多个after的可以尝试修改style标签，会的可以评论分享一下