擬似要素に付いたtext-decorationを無効化する方法

たまに使うことがある方法なので備忘録として。

のじはたブログに記事を投稿するのは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;
}

コメントを残す

お気軽にコメントをどうぞ。こっそり聞きたいときはコンタクトTwitterへどうぞ。