当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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.

网友答案:

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;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: