我有以下
标记：
- <a href="#" title="Feedback" id="Feedbacktogglenav">
- Feedback
- <i class="icon-comment"></i>
- </a>
在悬停时,我希望文本加下划线但不是字体 – 真棒图标.我知道你可以在图标上进行“text-decoration：none”(可以工作)但是当你将鼠标悬停在文本部分时,它仍会在图标上添加下划线.有任何想法吗？
http://jsfiddle.net/ZZEQd/
我已经发现了一种不需要额外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;
- }
