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

2022-01-22 00:00:00 hover css font-awesome

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

When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?

来源:

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

推荐答案

这些行通常来自默认(下划线)a 元素样式.

Those lines usually come from the default (underline) a element style.

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

Either use another element or remove the underline :

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

相关文章