CSSでFontAwesomeアイコンに下線をつけずリンクテキストにだけ適用する方法

リンクにFontAwesomeのアイコンを使っていて、ホバーするとアイコンまで下線が伸びてしまうこと、ありませんか？それ、意外と多くのWeb制作者が直面する「地味だけど気になる見た目の問題」です。

たとえばパンくずリストやSNSリンクなどで、家マークや矢印などのアイコンを先頭に付けて「ページ遷移の方向性」や「意味」を補強するのはよくある手法。でも、テキストリンクをホバーしたときにアイコン部分にも下線が引かれると、どうにも間の抜けた見た目になります。

今回はそんなFontAwesomeアイコンに下線をつけず、リンクテキストにだけ下線を表示する小技を、具体的なコードとともに紹介します。

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

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

なぜinline-blockで解決するのか？

display:inline-blockを設定することで、擬似要素は「テキストとは独立した矩形のブロック」になります。その結果、リンクテキスト本体の下線だけが表示され、アイコンには影響しません。

逆に、display:inlineのままだと、アイコンもテキストと同じライン上の一部として扱われるため、下線が繋がってしまうのです。

他のアイコンにも応用できる

このテクニックはFontAwesomeに限らず、以下のようなケースでも応用可能です。

• SVGアイコンを`:before`で表示している場合
• 文字実体参照（`→`など）を使っている場合
• 別のWebフォント（Material Iconsなど）を使っている場合

つまり、「疑似要素で何か表示していて、それにホバー下線を付けたくない」ときには、display:inline-blockが万能ということです。

まとめ：ちょっとの工夫で見た目は変わる

見た目の細かい違いは、UIの質を大きく左右します。FontAwesomeなどのアイコンフォントはとても便利ですが、CSSでの装飾によっては意図しない見た目になることも。

今回紹介した「display:inline-blockを指定するだけ」の小技で、リンクのホバー下線問題は簡単に解消できます。

• `:before`でFontAwesomeアイコンを表示すると、ホバー時に下線が適用される
• 原因は疑似要素がリンクの一部とみなされているため
• `display:inline-block`を追加すれば、アイコンは独立した扱いになり下線が除外される
• この方法はFontAwesomeに限らず、他のWebアイコンフォントや擬似要素全般に応用可能

ちょっとした気づきで、CSSはもっと美しくなります。ぜひこの小技、あなたのプロジェクトでも活用してみてください！