title: Making Social Icons change color on hover when using pseudo element contents
body: <p>I've got a series of social icons that are rendered using an icon font and the css <code>content:</code> property.</p>
  
  <pre><code>.icon-google-plus:before {
      content: "\e003";
  }
  </code></pre>
  
  <p>displays the google plus icon in a pseudo before element. </p>
  
  <p>How can I make this icon change color on hover ? I thought, wrongly it would be something similar to this...</p>
  
  <pre><code>.icon-google-plus:before a:hover {
      colour: @google_plus_red;
  }
  </code></pre>
  
  <p>My markup as requested</p>
  
  <pre><code>&lt;a class="share_styx icon-google-plus" target="_blank" href="https://plus.google.com/share?url={{url absolute="true"}}"&gt;
   &lt;span class="hidethis_styx"&gt;
      Google+
   &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>