我有以下标记:
<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; }