How can I use jQuery to edit the :after element created by CSS?
<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});
});
I've tried the code above, but it's not working correctly. Is there another method I should be using?