我有以下标记：
<a href="#" title="Feedback" id="Feedbacktogglenav"> Feedback <i class="icon-comment"></i> </a>
在悬停时,我希望文本加下划线但不是字体 – 真棒图标.我知道你可以在图标上进行“text-decoration：none”(可以工作)但是当你将鼠标悬停在文本部分时,它仍会在图标上添加下划线.有任何想法吗？
解决方法
我已经发现了一种不需要额外span标记的方法,它可以在我尝试过的每个浏览器中运行(FF / Chrome / Safari / Opera)…除了IE8(我还没有在IE 9中测试过)或者10).
只需将图标声明为display：inline-block,悬停时不再加下划线.
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;
}