Edit css:after with jQuery .siblings()

Question

I would like to edit :after element created by css with jQuery.

<div class="box">
            <h3 class="social">Social</h3>
              <ul>
                <li><a href="https://www.youtube.com/"
                  onmouseout="bgc('rgba(0, 0, 0, 0.4)')"
                  onmouseover="bgc('rgba(230, 33, 23, 0.88)')">Youtube</a></li></ul></div>

.box ul li a:after {
    content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: width 1s;
}

.box ul li a:hover:after {
    width: 90%;
}
/* jQuery */
$("document").ready(function bgc(color){
  $('.box ul li a').siblings().css({"border-color": color});
});

But this code doesn't work. Is there any way how to do it?

this question has answer already here: http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Sanjeev Kumar, Jul 06 '16 at 09:18

score 1 · Accepted Answer · answered Jul 06 '16 at 09:19

You can't access after or before elements with JavaScript, but you can change their style by appending classes to their parent element.

.colorBlue:after {
  border-color: blue;
}

and then:

$('.box ul li a').toggleClass('colorBlue');

would change border color of after element.

score 0 · Answer 2 · edited May 23 '17 at 12:06

You can not select pseudo elements in jQuery because pseudo-elements themselves are not part of the DOM. - Selecting and manipulating CSS pseudo-elements

Although they are rendered by browsers through CSS as if they were like other real DOM elements, , and thus you can't select and manipulate them directly with jQuery (or any JavaScript APIs for that matter, not even the Selectors API).

See this question for more: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Edit css:after with jQuery .siblings()

2 Answers2