Question

我有以下标记：

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

在悬停时，我希望文字加下划线但不是字体真棒图标。我知道你可以做＆＃34; text-decoration：none＆＃34;在图标上（可以工作）但是当您将鼠标悬停在文本部分时，它仍然会在图标上添加下划线。有什么想法吗？

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分配给第一个父元素，即初始标记。

Answer 4

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

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

谢谢神秘人物！

Answer 5

如果你不能添加一个span元素（让我们假设你已经接受了CSS），它应该在你的图标元素上使用float:left or right。

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

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

我在您的范围内添加了一个类，因为它不会影响将来的span标记

Answer 7

如果遇到无法使用$ docker exec -it store psql -U custom customname psql: FATAL: database customname does not exist $ docker exec -it store psql -U custom postgres psql (11.3) Type help for help. postgres=# ^D或:before的情况（例如，由于特定图标是由内容而不是全局样式设置的），并且您也不会不想到处把:after放在链接文本的任何地方...另一种选择是在链接上放置填充，并将图标绝对放置在填充上。

HTML

<span>

CSS

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

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

我敢肯定，在各种特殊情况下，这种情况都无法解决...但是对于简单情况，应该没事。

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

7 个答案: