2019年7月18日
2020年11月2日
【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時にFontAwesomeに下線をつけないようにする方法
.link::after {
content: "\f08e";
display: inline-block; //<—追記
font-family: FontAwesome;
margin-right: 0.2rem;
}
このように 「display: inline-block;」 を追記することでFontAwesomeの下に線が出なくなりました。
フォローお願いします
- @sawami
- さわみ、鍵認証に必要なファイルを誤って消す 2021年1月22日
- さわみ、sshコマンドを簡略化する 2021年1月21日
- さわみ、SSH接続を鍵認証で行う 2021年1月20日
- 今日はやたら赤信号に引っかかるな〜ってことがあるのはなぜ？『チコちゃんに叱られる』 2021年1月19日
- なぜメリーゴーランドは馬が回っているの？『チコちゃんに叱られる』 2021年1月18日