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

发布时间：2020-12-14 23:45:09 所属栏目：资源来源：网络整理

导读：我有以下标记： a href="#" title="Feedback" id="feedbacktogglenav" Feedback i class="icon-comment"/i/a 在悬停时,我希望文本加下划线但不是字体 – 真棒图标.我知道你可以在图标上进行“text-decoration：none”(可以工作)但是当你将鼠标悬停在文本部分

我有以下标记：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!