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

【问题标题】：How to add css to pseudo elements using jquery or javascript?如何使用 jquery 或 javascript 将 css 添加到伪元素？
【发布时间】：2016-03-11 06:29:11
【问题描述】：

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

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

【问题讨论】：

stackoverflow.com/questions/17788990/…
感谢您的建议。但我已经有 css 我不想追加新的我喜欢一些我们使用 .css() 或任何 javascript 方法应用的内联 css
你能分享你的尝试吗？
如果您想使用 JS 应用 css，您可以拥有一个具有所需样式的类，然后根据需要添加和删除
见stackoverflow.com/questions/35902600/…，stackoverflow.com/questions/5041494/…

标签： javascript jquery pseudo-element

【解决方案1】：

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

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

【讨论】：

感谢您的回答。它正在工作。我找到了另一个document.styleSheets[0].addRule("body:before","display:none !important")

【解决方案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;}
}

当不透明度改变时，脚本会翻译伪元素

【讨论】：