Keep underline on anchor text but not on font awesome icon in anchor

Question

I have the following markup:

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback
  <i class="icon-comment"></i>
</a>

On hover, I would like the text to be underlined but not the font-awesome icon. I know you can do "text-decoration:none" on the icon (which works) but when you hover on the text part it still adds the underline to the icon. Any ideas?

http://jsfiddle.net/ZZEQd/

Answer 1

I've discovered a way of doing this without needing an extra span tag, it works in every browser I've tried it in (FF/Chrome/Safari/Opera)... except IE8 (I haven't tested in IE 9 or 10 either).

Just declare the icon as display:inline-block, no more underline on hover.

Example: http://jsfiddle.net/J432G/

HTML:

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback<i class="icon-comment"></i>
</a>

CSS:

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
i:after{
  content: '{icon}';
  display: inline-block;
  padding-left: 1em;
}

Answer 2

...but when you hover on the text part it still adds the underline to the icon. Any ideas?

To get this to work you'd need to contain the link text within a separate element (a span, ideally):

<a href="#">
    <span>Feedback</span>
    <i class="icon-comment"></i>
</a>

Now you can remove the text-decoration from the link completely and assign it only to the span (on hover):

a {
    text-decoration:none;
}

a:hover span {
    text-decoration:underline;
}

JSFiddle demo.

Answer 3

The only way to do this reliably is to assign text-decoration:none to the first parent element i.e the initial a tag.

Answer 4

If you cannot add a span element (let's assume you just have acccess to CSS), it should work withfloat:left or right on your icon element.

See: CSS linked images are being underlined ("a" display is set to block)

Answer 5

Someone just responded but deleted their response. The solution was:

#utilitynav a i {text-decoration:none;}

Thank you mystery person!