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

【问题标题】：Keep underline on anchor text but not on font awesome icon in anchor在锚文本上保留下划线，但在锚中的字体真棒图标上不加下划线
【发布时间】：2013-10-11 20:09:34
【问题描述】：

我有以下标记：

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

悬停时，我希望文本带有下划线，而不是字体真棒图标。我知道您可以在图标上执行“text-decoration:none”（有效），但是当您将鼠标悬停在文本部分时，它仍会为图标添加下划线。有什么想法吗？

http://jsfiddle.net/ZZEQd/

【问题讨论】：

你能把你在jsfiddle.net的代码贴出来
通过:before/:after添加图标，则不是标记的标记，而是伪元素。

标签： html css font-awesome

【解决方案1】：

我发现了一种不需要额外 span 标签的方法，它适用于我尝试过的所有浏览器（FF/Chrome/Safari/Opera）... except 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;
}

【讨论】：

很好，没有ielement 也可以。我的图标是通过a:before添加的。
谢谢。你用这个修复为我省了很多心痛。非常感谢。

【解决方案2】：

如果您无法添加 span 元素（假设您只有 CSS 访问权限），它应该可以在您的图标元素上使用float:left or right。

见：CSS linked images are being underlined ("a" display is set to block)

【讨论】：

【解决方案3】：

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

要使其正常工作，您需要将链接文本包含在单独的元素中（最好是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.

【讨论】：

不是理想的解决方案，因为我不能为每个链接都提供服务。例如，当客户添加他们的文本时。最好将以下解决方案与 display: inline-block 一起使用。这不需要对 HTML 进行任何更改。
@Corni 听起来非常具体。此外，Font-Awesome 图标默认设置为display: inline-block，因此以下答案与我认为的问题并不完全相关。

【解决方案4】：

可靠地做到这一点的唯一方法是将 text-decoration:none 分配给第一个父元素，即初始 a 标记。

【讨论】：

【解决方案5】：

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

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

谢谢神秘人！

【讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案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/

我敢肯定，在各种特殊情况下，这可能都行不通……但对于简单的情况，应该没问题。

【讨论】：