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

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

FontAwesome

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

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

当ブログのパンくずリストを例に説明します。

WeberNoteのパンくずリスト

当ブログでは、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;
}

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

こんな記事も読まれてます

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント