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

Question

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

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

Answer 1

如果它是静态样式，您可以使用 :before ore :after 定义 class 并使用 JQuery..simpelClass:after { fooo: bar}[=12 添加 Class =]

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

Answer 2

您可以为您的元素及其伪元素添加和删除 class:

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添加到伪元素？

How to add css to pseudo elements using jquery or javascript?

javascript

jquery

pseudo-element