如何使用 jquery 或 javascript 将 css 添加到伪元素？

Question

如何使用 javascript 或 jQuery 更改伪元素的 css。 请不要举例:hover我知道如何访问这个属性。

我想知道:before和:after伪元素

Answer 1

如果它是静态样式，您可以使用 :before ore :after 定义一个类，并使用 JQuery 添加该类。 .simpelClass:after { fooo: bar}

$(element).addClass('simpleClass');

Answer 2

您可以设置元素及其伪元素添加和删除类的样式：

脚本.js

document.getElementById("element_id").addEventListener('mouseover', ()=>{
    document.getElementById("element_id").classList.add("link_active")
}, false)
document.getElementById("element_id").addEventListener('mouseleave', ()=>{
    document.getElementById("element_id").classList.remove("link_active")

}, false)

样式文件

#element_id::after, #element_id::before{
    content: "|";
    position: absolute;
    opacity: 0;
    transition: transform 0.5s ease-in-out;
}

#element_id::after{
    transform: translateX(10px);
    animation: after_active 0.5s ease-out  forwards;
}
@keyframes after_active{
    from{opacity: 0;}
    to{opacity: 1;}
}
#element_id::before{
    transform: translateX(-10px);
    animation: before_active 0.5s ease-out  forwards;
}
@keyframes before_active{
    from{opacity: 0;}
    to{opacity: 1;}
}

脚本将在更改不透明度时转换伪元素