title: remove underline with :hover:before
body: <p>'m using a font to create icons for my navigations in the following example :
  <a href="http://www.blackcountrydesigns.co.uk/examples/green/" rel="noreferrer">http://www.blackcountrydesigns.co.uk/examples/green/</a></p>
  
  <p>The problem I'm having is when you hover over a link you get an underline on both the link and the icon. </p>
  
  <p>I want to know how can I remove the underline on the icon but keep it on the link.</p>
  
  <p>Here's my code : </p>
  
  <pre><code>HTML
  &lt;ul class="hidden-phone"&gt;
           &lt;li&gt;&lt;a class="entypo-home" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a class="entypo-briefcase" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a class="entypo-picture" href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a class="entypo-address" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  CSS
  #nav ul li a {color:#ccc; margin-left: 25px;}
  #nav [class*='entypo-'].active:before {color:#666;}
  #nav [class*='entypo-']:before {font-size: 46px; position: relative; top: 5px;left: -3px; color:#999;}
  [class*='entypo-']:hover:before {text-decoration:none !important;}
  </code></pre>
  
  <p>Many thanks </p>