Question

I’m trying to style a simple a tag to have a preceding icon which I have got to a point where I am reasonably happy with it (although I am still not sure I’m doing it the best way).

I am using text for the icon itself with a surrounding CSS circle.

The only niggle is that in Chrome when I hover over the link or icon a text shadow appears below the text character in the icon below where an underline would appear although this is set to none (I need text shadow on the character itself.

I have setup a jsFiddle example to illustrate: http://jsfiddle.net/4Etbm/6/

Any help would be appreciated or suggestions of a better way of doing this.

I have only seen one example of this on StackOverflow but the solutions weren’t quite what I was after.

Answer 1

Wrapping a span around the text solves the problem http://jsfiddle.net/4Etbm/9/

<div>
    <a href="#" class="iconLinkQuestion"><span>Need help now?</span></a>
</div>​

You’ll also need to change

.iconLinkQuestion:hover {
    text-decoration: underline;
}

to

.iconLinkQuestion:hover span {
    text-decoration: underline;
}