在锚文本上保留下划线，但不在锚中的字体真棒图标上保留下划线

Question

我有以下标记：

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback
  <i class="icon-comment"></i>
</a>

悬停时，我希望文本带有下划线，而不是字体真棒图标。我知道您可以在图标上进行"文本装饰：无"(有效(，但是当您将鼠标悬停在文本部分时，它仍然会在图标上添加下划线。有什么想法吗？

http://jsfiddle.net/ZZEQd/

Answer 1

我发现了一种无需额外 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;
}

Answer 2

。但是当您将鼠标悬停在文本部分时，它仍然会在图标上添加下划线。有什么想法吗？

要使其正常工作，您需要将链接文本包含在单独的元素中(理想情况下是span(：

<a href="#">
    <span>Feedback</span>
    <i class="icon-comment"></i>
</a>

现在，您可以从链接中完全删除text-decoration，并将其仅分配给span(悬停时(：

a {
    text-decoration:none;
}
a:hover span {
    text-decoration:underline;
}

JSFiddle demo.

Answer 3

可靠地

执行此操作的唯一方法是将text-decoration：none分配给第一个父元素，即初始a标签。

Answer 4

如果你不能添加一个span元素(假设你只有对CSS的访问(，它应该在你的图标元素上与float:left or right一起工作。

请参阅：CSS 链接的图像带有下划线("a"显示设置为阻止(

Answer 5

有人刚刚回复，但删除了他们的回复。解决方案是：

#utilitynav a i {text-decoration:none;}

谢谢神秘人！

Answer 6

http://jsfiddle.net/ZZEQd/2/

只需在HTML中添加一个span标签，您应该就可以了。

.HTML：

    <a href="#" title="Feedback" id="feedbacktogglenav">
       <span class="linkHover">Feedback</span>
       <i class="icon-comment"></i>
    </a>

.CSS

a {
    text-decoration:none;
}
.linkHover:hover{
    text-decoration: underline;
}
#utilitynav .icon-comment {
    font-size: 12px;
    margin-left: 3px;
    position: absolute;
    top: 2px;
}
#utilitynav .icon-comment:hover {
    text-decoration:none;
}
#utilitynav #feedbacktogglenav {
    margin-right: 12px;
}

我在您的跨度中添加了一个类，因为它不会影响未来的跨度标签

Answer 7

如果您

遇到无法使用:before或:after的情况(例如，因为特定图标是由内容设置的，而不是由全局样式设置的(，并且您也不想进入并在链接文本周围放置<span>到处......另一种选择是在链接上放置填充，并将图标绝对放置在填充上。

.HTML

    <a href="#">Feedback <i class="icon-comment fas fa-link"></i></a>

.CSS

    a {
      position: relative;
      text-decoration:none;
      padding-left: 20px;
    }
    a:hover {
        text-decoration:underline;
    }
    a i {
      position: absolute;
      left: 0;
    }    

JSFiddle： http://jsfiddle.net/w6bL5m8k/1/

我敢肯定，可能有各种各样的特殊条件，在这种情况下这是行不通的......但是对于简单的情况，应该没问题。