疑似要素にも下線がついてしまう時の対処法【CSS】

先日CSS疑似要素の::beforeと::afterの使い方と正しい書き方【CSS】で解説した疑似要素::beforeと::after。
リンクやテキストにtext-decorationで下線をつけると、疑似要素にも下線がついてしまう場合があります。そんな時の対処法を紹介していきます。

疑似要素にも下線がついてしまった例

リンクやテキストにtext-decorationで下線を設定した際に、以下のように疑似要素にも下線がついてしまった事はありませんか?
※例としてテキストの前にbeforeで「●」を追加

<p>疑似要素にも下線がついてしまった例</p>

p {
    text-decoration: underline;
}
p::before {
    content: ●;
    padding-right: 1em;
}

疑似要素にも下線がついてしまう場合の対処法

先程の、疑似要素にも下線がついてしまう場合の対処法として以下の2つを紹介します。

疑似要素のdisplayをinline-blockに変更する

疑似要素のdisplayをinline-blockに変更する事で、疑似要素に下線が付かなくなります。

p {
    text-decoration: underline;
}
p::before {
    content: ●;
    display: inline-block;
    padding-right: 1em;
}

親要素に疑似要素、子要素にtext-decoration

タイトル通り、親要素に疑似要素、子要素に下線で分けるやり方です。

<p><span>親要素に疑似要素、子要素にtext-decoration</span></p>

p::before {
    content: "●";
    padding-right: 1em;
}
p span {
    text-decoration: underline;
}

以上が疑似要素にも下線がついてしまう時の対処法となりますが、個人的には疑似要素のdisplayをinline-blockに変更する方が、余計なHTMLも追加にならないので良いかと思います。

さいごに

いかがでしたでしょうか。
意図せず下線が付いてしまって、対応に時間がかかってしまう場合がありますので、対処法を覚えておく事でスムーズにコーディングが出来るかと思います。