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

<a href="#" title="FeedBACk" id="feedBACktogglenav">
  FeedBACk
  <i class="icon-comment"></i>
</a>

我已经发现了一种不需要额外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;
}