title: CSS Change color of ":after" element on hover
body: <p>Lets say i have a list of elements : </p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;First&lt;/li&gt;
      &lt;li&gt;Second&lt;/li&gt;
      &lt;li&gt;Third&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>When i hover a list item , i need to be able to get more info about each subject. I did this with CSS <code>:after</code> pseudo-element .</p>
  
  <pre><code>ol {
      list-style-type: decimal-leading-zero;
  }
  
  li:hover:after {
      content: " + More info";
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/79Lvn/" rel="noreferrer">Here is a jSfiddle</a></p>
  
  <p>Now when i hover on the <code>More info</code> text , i want to change it's color . I don't really get it how to acheive this effect . 
  i have tried the following css rules , but it does not work as expected . </p>
  
  <pre><code>li:after:hover {
      color: red;
  }
  
  li:hover:after:hover {
      color: red;
  }
  </code></pre>
  
  <p>Is it possible to do in CSS ? </p>
  
  <p>If yes , another question is interesting , can i attach an <code>onclick</code> event to the <code>:after</code> element ? </p>