google-chrome - 链接内容之前的 CSS 在设置为无的下划线上有幻影文本阴影

Question

我正在尝试设计一个简单的 a 标签，使其具有前面的图标，我已经达到了我对它相当满意的程度（尽管我仍然不确定我是否以最好的方式做到这一点）。

我正在使用带有周围 CSS 圆圈的图标本身的文本。

唯一的问题是，在 Chrome 中，当我将鼠标悬停在链接或图标上时，文本阴影会出现在下方图标中的文本字符下方，尽管这设置为无（我需要字符本身的文本阴影。

我设置了一个 jsFiddle 示例来说明：http: //jsfiddle.net/4Etbm/6/

任何帮助将不胜感激或提出更好的方法建议。

我在 StackOverflow 上只看到过一个这样的例子，但解决方案并不完全符合我的要求。

Answer 1

在文本周围环绕一个跨度可以解决问题http://jsfiddle.net/4Etbm/9/

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

你还需要改变

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

到

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