title: Edit css:after with jQuery .siblings()
body: <p>I would like to edit :after element created by css with jQuery.</p>
  
  <pre><code>&lt;div class="box"&gt;
              &lt;h3 class="social"&gt;Social&lt;/h3&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="https://www.youtube.com/"
                    onmouseout="bgc('rgba(0, 0, 0, 0.4)')"
                    onmouseover="bgc('rgba(230, 33, 23, 0.88)')"&gt;Youtube&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  
  .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});
  });
  </code></pre>
  
  <p>But this code doesn't work. Is there any way how to do it?</p>