たまに使うことがある方法なので備忘録として。
のじはたブログに記事を投稿するのは8か月ぶりになります🫠
去年は月2~3記事頑張っていましたが、今年はやることが非常に多く更新が止まってました。来年は頑張るつもりです。
擬似要素に付いたtext-decorationは直接消せない
以下の例のようにリンクにtext-decorationがついていると擬似要素にも下線が付与されています。
アイコンに下線がついている
css
.example {
text-decoration: underline;
}
.example:before {
content: "\f138";
font-family: "Font Awesome 6 Free";
font-weight: 700;
margin-right: 4px;
}擬似要素でtext-decorationを打ち消しても反映されません。
解決方法
この場合は、擬似要素にdisplay: inline-blockを指定しましょう。
これでアイコン部分のみ下線を消すことができました。
下線を消せた
css
.example {
text-decoration: underline;
}
.example:before {
content: "\f138";
font-family: "Font Awesome 6 Free";
display: inline-block;
font-weight: 700;
margin-right: 4px;
}