remove underline with :hover:before

Question

'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

Answer 1

The only way I've found, as yet, to remove the (normally) inherited styles from the generated content is to give it position: absolute, using the simplified demo (from the comments):

a:link
{
    text-decoration: none;
    position: relative;
    margin-left: 1em;
}

a:hover
{
    text-decoration: underline;
}

a:before
{
    content: '#';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 1em;
}

JS Fiddle demo.

The down-side of this approach, of course, is the requirement of an explicit width being assigned to the generated-content (and to the margin of the parent a element).

Answer 2

An alternative approach would be to wrap the text of the link in an element, e.g. span, remove underline from the 'a' and apply it to the span on hover.

<li><a class="entypo-home active" href="#"><span>Home</span></a></li>

[class*='entypo-'] a { text-decoration: none; }
[class*='entypo-'] a:hover span { text-decoration: underline; }