title: Modify CSS of the :after pseudo-element using jQuery
body: <p>I use the <code>:after</code> pseudo-element to display a decoration (triangle) after a block (<code>&lt;li&gt;</code> in my case). The idea is to distinguish the currently selected <code>li</code> from others.</p>
  
  <p><a href="http://jsfiddle.net/kbpg6/" rel="noreferrer">Fiddle here</a></p>
  
  <p>The html follows:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="active" style="background-color: hsl(108, 60%, 50%)"&gt;One&lt;/li&gt;
      &lt;li style="background-color: hsl(36, 60%, 50%)"&gt;Two&lt;/li&gt;
      &lt;li style="background-color: hsl(252, 60%, 50%)"&gt;Three&lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>ul li {
      width: 300px;
      height: 30px;
      border: 1px dashed;
      position: relative;
  }
  
  li.active::after {
      content: " 0020";
      display: block;
      font-size: 0px;
      position: absolute;
      left:100%;
      top: 0%;
      width: 0px;
      height: 0px;
      background: transparent;
      border: 17px solid transparent;
      border-left-color: #FF3900;
  }
  </code></pre>
  
  <p>I want to change the <code>border-left-color</code> style attribute of <code>li.active::after</code> pseudo element to match the <code>background-color</code> of the <code>&lt;li&gt;</code> element with <code>class=active</code>.</p>
  
  <p>I came up with the following jquery:</p>
  
  <pre><code>$("ul li").click(function() {
      $("ul li").removeClass("active");
      $(this).addClass("active");
      $("li.active::after").css('border-left-color', $(this).css('background-color'));
  });
  </code></pre>
  
  <p>This doesn't work as expected. Any help is appreciated.</p>