'm using a font to create icons for my navigations in the following example :
<http://www.blackcountrydesigns.co.uk/examples/green/>

The problem I'm having is when you hover over a link you get an underline on both the link and the icon. 

I want to know how can I remove the underline on the icon but keep it on the link.

Here's my code : 

```
HTML
<ul class="hidden-phone">
         <li><a class="entypo-home" href="#">Home</a></li>
         <li><a class="entypo-briefcase" href="#">Services</a></li>
         <li><a class="entypo-picture" href="#">Portfolio</a></li>
         <li><a class="entypo-address" href="#">Contact</a></li>
</ul>

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;}

```

Many thanks