javascript - 编辑 css :after with jQuery . siblings()

Question

我想用 jQuery 编辑 :after 由 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});
});

但是这段代码不起作用。有什么办法吗？

Answer 1

您无法使用 JavaScript 访问 after 或 before 元素，但您可以通过将类附加到它们的父元素来更改它们的样式。

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

然后:

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

将更改 after 元素的边框颜色。