Update div:after property using jQuery

Question

I need to update the following CSS using JQuery since the color will be generated dynamically. Any help will be appreciated:

#Level1 div:after {
    content: "";  
    border-left-color: lightblue;
}

Here I need to update the border-left-color property dynamically so I have to use JQuery to update it.

pseudo elements are *not* part of the DOM, so you can't access it from script... — kukkuz, Dec 13 '16 at 16:40

score 0 · Accepted Answer · answered Dec 13 '16 at 16:40

0

jQuery cannot directly select a pseudo element. What you can do instead is add a class to a parent element and then key the pseudo selector on that class, something like this:

#Level1 div:after {
    content: "";  
    border-left-color: lightblue;
}
#Level1 div.foo:after {
    border-left-color: #C00;
}

// add the class as needed in your JS code:
$('#Level1 div').addClass('foo');

answered Dec 13 '16 at 16:40

Rory McCrossan

331,213
40
305
339

Thanks Rory McCrossan for the answer. But how will I set the color property dynamically to the newly created class? please help. – Maruthachalam K Dec 13 '16 at 16:47
Yes, it's possible to set the `border-left-color` property dynamically on `#Level1 div::after` in javascript (and in jQuery). Here's the jQuery solution: `var newStyles = ''; $('head').append(newStyles);` You can computationally manipulate the string `newStyles` prior to appending it. – Rounin Dec 13 '16 at 16:55
Ok, maybe impossible was a little strong. However that method of doing anything is frankly horrendous – Rory McCrossan Dec 13 '16 at 17:12

Update div:after property using jQuery

1 Answers1