在锚文本上保持下划线,但不在锚中的字体真棒图标上

Question

我有以下标记:

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

在悬停时,我希望文本加下划线但不是字体 - 真棒图标.我知道你可以在图标上进行"text-decoration:none"(可以正常工作)但是当你将鼠标悬停在文本部分时,它仍然会在图标上添加下划线.有任何想法吗？

http://jsfiddle.net/ZZEQd/

Answer 1

我已经发现了一种方法,无需额外的span标记,它可以在我尝试过的每个浏览器中运行(FF/Chrome/Safari/Opera)... 除了 IE8(我还没有在IE 9中测试过)或者10).

只需将图标声明为display:inline-block,悬停时不再加下划线.

示例: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

...但是当您将鼠标悬停在文本部分时,它仍然会在图标上添加下划线.有任何想法吗？

要使其工作,您需要在单独的元素(a span,理想情况下)中包含链接文本:

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

现在您可以完全删除text-decoration链接并仅将其分配给span(悬停时):

a {
    text-decoration:none;
}

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

JSFiddle演示.