Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS before content on link has phantom text shadow on underline that is set to none

CSS before content on link has phantom text shadow on underline that is set to none

Problem

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.

Problem courtesy of: Monkeeman69

Solution

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

Need help now?

You'll also need to change

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

to

.iconLinkQuestion:hover span {
    text-decoration: underline;
}
Solution courtesy of: Ana

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS before content on link has phantom text shadow on underline that is set to none

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×