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

Question

How can I change css of pseudo elements using javascript or jQuery. Please don't give example of :hover I know how to access this attribute.

I want to know about :before and :after pesudo elements

http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery — gurvinder372, Mar 11 '16 at 06:31
Thank you for suggestion. but i already have css i don't want to append new one i like some inline css which we apply using `.css()` or any javascript method — milan patel, Mar 11 '16 at 06:36
if you want to apply css using JS you can have a class with the desired style and just add and remove on requirement — guradio, Mar 11 '16 at 06:37
See http://stackoverflow.com/questions/35902600/manipulate-css-before-selector-with-jquery/ , http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — guest271314, Mar 11 '16 at 06:40
@guradio we can apply using tag also. @gurvinder372 i have tried `jQuery('body:before').css({'display':'none !important'});` — milan patel, Mar 11 '16 at 06:41

score 0 · Accepted Answer · answered Mar 11 '16 at 06:35

0

if it is a Static style you can define a class with the :before ore :after and add the Class using JQuery..simpelClass:after { fooo: bar}

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

answered Mar 11 '16 at 06:35

TEST

67
7

Thank you for answer. it's working. i have found another one `document.styleSheets[0].addRule("body:before","display:none !important")` – milan patel Mar 11 '16 at 07:01

score -1 · Answer 2 · answered Mar 23 '20 at 17:57

You can style your element and its pseudo elements adding and removing a 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;}
}

The script will translate the pseudo elements while the opacity is changed

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

2 Answers2