title: How to fade in and out a CSS ":after" pseudo element when adding or removing a class
body: <p>I know there are a lot of other questions on using transitions on CSS pseudo element but after going through a whole bunch of them I still can't get my scenario to work.</p>
  
  <p>Basically, I want to add a class to an element, the class has a :after pseudo element with some content and a background. I'd like a fading effect on the :after element when adding or removing the class.</p>
  
  <p>I've been trying this out in this <a href="http://jsfiddle.net/olakarlsson/W5e9Q/6/">jsfiddle</a> and the code I have so far it this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="divA"&gt;Div test&lt;/div&gt;
  &lt;button id="btnAdd"&gt;Add it&lt;/button&gt;
  &lt;button id="btnRemove"&gt;Take Away&lt;/button&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      width: 200px;
      transition: all .5s linear;
      background: red;
  }
  
  .test{
       background: blue;
  }
  
  .test:after{    
      background: #0c0;
      content: "Test";
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$("#btnAdd").click(function() {
    $("#divA").addClass("test");
  });
  
  $("#btnRemove").click(function() {
    $("#divA").removeClass("test");
  });
  </code></pre>
  
  <p>Any help and hints would be most appreciated.</p>