title: :after selector not working if jquery inserts .active in link
body: <p>I'm creating a menu and once the navigation is clicked I have different image background for each stage. I'm using <code>:after</code> so I can position it absolute and place it where I want and behind the text. This is also as I'm using already <code>:before</code> for another purpose. It was working before but I was making my CSS shorter and more effictive, everything was fine except that when the link is clicked the following css selector would not work:</p>
  
  <pre><code>.sub-nav a:active:after, .sub-nav a.active:after
  </code></pre>
  
  <p>Once clicked and :active status is activated the image appears. Once this sector is open the jquery adds the <code>.active</code> class, but the problem is that the :after does not load. </p>
  
  <p>I'm getting crazy and maybe somebody could see the error I'm doing...</p>
  
  <p>Hereby you have a fiddle of my actual code:
  <a href="http://jsfiddle.net/tGXWG/2/" rel="nofollow noreferrer">http://jsfiddle.net/tGXWG/2/</a></p>
  
  <p>What the :after code is inserteing is the background image like this.. </p>
  
  <p>:hover:</p>
  
  <p><img src="https://i.stack.imgur.com/eLVv6.png" alt="enter image description here"></p>
  
  <p>:active + .active:</p>
  
  <p><img src="https://i.stack.imgur.com/Q2acn.png" alt="enter image description here"> </p>