字体真棒CSS中的奇怪下划线

Posted 2023-03-06

【中文标题】字体真棒CSS中的奇怪下划线

【英文标题】：Strange underlines in font-awesome CSS

【发布时间】：2014-03-25 20:44:59

【问题描述】：

当我将鼠标悬停在 font-awesome 的图标上时（当它们堆叠在一起时），如下所示（见图）。我得到了这些奇怪的下划线。知道它们来自哪里吗？

来源：

<div class="text-center">
  <!-- FB -->
  <a href="http://www.facebook.com/share.php?u=$shareURL" target="_blank" style="color : #555">
    <i id="facebook" class="fa-3x fa fa-facebook-square"></i>
  </a>
  <!-- Twitter -->
  <a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+$shareURL+@SolidTranslate" target="_blank" style="color : #555">
    <i id="twitter" class="fa-3x fa fa-twitter-square"></i>
  </a>
  <!-- LinkedIn -->
  <a href="http://www.linkedin.com/shareArticle?url=$shareURL&title=Sign-Up%20for%20SolidTranslate%20here:%20$shareURL&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
    0here:%20$shareURL&source=$shareURL"
    target="_blank" style="color : #555">
    <i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
  </a>
  <!-- Google+ -->
  <a href="https://plus.google.com/share?url=$shareURL" target="_blank" style="color : #555">
    <i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
  </a>
</div>

【问题讨论】：

不知道为什么有人会否决这个无辜的问题。

哈哈，同意。完全有效的问题。其实帮了我不少忙。

所有当前的答案都说基本相同，并且没有一个解释我如何在仅在字体上设置text-decoration: none; 时保持容器a 标签的悬停文本装饰-真棒图标。各种SCSS嵌套我都试过了，还没弄明白。

【参考方案1】：

这些行通常来自默认（下划线）a 元素样式。

要么使用另一个元素，要么删除下划线：

a.social  /* or whatever your class */
   text-decoration: none;

【参考方案2】：

假设您使用的是a 标签

text-decoration: none;

【参考方案3】：

可能还需要在类定义中使用重要关键字

    text-decoration: none !important;

【参考方案4】：

"文本装饰：无；"需要用 "a" 标签上的 ":hover" 选择器来设置，像这样...

a:hover 
    text-decoration: none;

【参考方案5】：

Fontawesome 很棒很有趣。但是，如果您将它用作字体，这是预期的行为。

为每个状态添加文本装饰。 如果您不添加:link，它将显示紫色下划线，很难看到但它就在那里。 如果不加:active，点击时会显示红色下划线，非常明显。

a:hover, a:focus, a:active, a:visited, a:link
    text-decoration: none;

【参考方案6】：

移除text-decoration 对所有hover 类对象的hover 效果：

.fa:hover 
  text-decoration: none;