html - 在 anchor 文本上保留下划线，但不在 anchor 中的 Font Awesome 图标上

Question

我有以下标记:

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

悬停时，我希望文本带有下划线，但字体超棒的图标不会。我知道你可以在图标上做“文本装饰:无”(有效)但是当你将鼠标悬停在文本部分时它仍然会在图标上添加下划线。有什么想法吗？

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;
}