Question

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

我想了解:before和:after pesudo元素

Answer 1

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

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

Answer 2

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

script.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)

style.css

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

该脚本将在更改不透明度时翻译伪元素

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

2 个答案: