【CSS】FontAwesomeのリンクホバーの下線をテキストだけにする方法

2018.01.04 2020.09.17 HP制作

今回は備忘録を兼ねたCSSの小ネタ。

FontAwesome

FontAwesomeでリンクアイコンをCSSで表示している時、hoverの下線をテキストリンクのみにする方法を紹介します。

FontAwesomeのホバーをテキストだけにする方法

例として、当ブログではCSSの:before擬似要素でFontAwesomeアイコンを表示し、通常のテキストリンクは下線なし、ホバーする（テキストにマウスがのる）と下線が出るよう設定しています。

.breadcrumb li a{
  text-decoration:none;
}
.breadcrumb li a:hover{
  text-decoration:underline;
}
.breadcrumb li:first-child a:before{
  font-family: FontAwesome;
  content: '\f015';
  margin-right: 5px;
}

これでも動作に問題はありませんが、ホバー時の下線がアイコンまで入ってしまい、見た目が少しカッコ悪くなってしまいます。

これを回避するためには、:before擬似要素に[display:inline-block]を追加します。

.breadcrumb li:first-child a:before{
  font-family: FontAwesome;
  content: '\f015';
  margin-right: 5px;
  display:inline-block;
}

これでホバーした時の下線はテキストだけになります。