【CSS】テキストリンクのhover時にFontAwesomeに下線をつけないようにする方法 | 頑張ることをやめたら人生楽しくなった

【CSS】テキストリンクのhover時にFontAwesomeに下線をつけないようにする方法

CSSの備忘録です。
下記のようにテキストとFontAwesomeを組み合わせてリンクを作った時、 hover すると下線がFontAwesomeの下まで表示されるされます。

例:テキストリンク
.link {
  color: #0046e8;
}
.link::after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-right: 0.2rem;
}
.link:hover {
  text-decoration: underline;
}
例:Hoverで下線が出てしまう

テキストリンクのhover時にFontAwesomeに下線をつけないようにする方法

.link::after {
  content: "\f08e";
  display: inline-block; //<—追記
  font-family: FontAwesome;
  margin-right: 0.2rem;
}
例:HoverでFontAwesomeの下に線が出ない

このように 「display: inline-block;」 を追記することでFontAwesomeの下に線が出なくなりました。

フォローお願いします