CSSの::before・::afterの疑似要素が効かない場合の対処法！

CSSの::before・::afterの疑似要素はCSS側で文字を付加したり、コンテンツを付け足したり出来、かなり重宝するテクニックです。

しかし、よくあるのがCSSの::before・::afterの疑似要素をちゃんと設定しているのにそれが効かず表示されないという問題です。

そこで今回はCSSの::before・::afterの疑似要素が効かない場合の原因と対処法について解説します。

いくつか原因が考えられますので、順番に紹介していきます。

::before・::afterの疑似要素が効かない原因で一番多いのがcontentプロパティの指定が無いという問題です。

疑似要素で指定したい部分にテキストがあろうがなかろうがcontentプロパティは設定するようにしましょう。そうではないと疑似要素が表示されません。

上記のサンプルコードではcontentプロパティが無い場合では::beforeの疑似要素は表示されず、ある場合は::beforeの疑似要素が表示さているのが確認出来ます。

必ずcontentプロパティを設定するようにしましょう。

contentプロパティを空文字で設定すると、もちろんテキストは表示されません。その代わりに背景色を付けたボックスを表示したかったり領域をとりあえず確保したい用途で使われますがその場合にはdisplayプロパティの指定とwidthとheightを付けてサイズ指定しましょう。

上記のサンプルコードではdisplayプロパティとwidth、heightプロパティの指定が無い方はcontentプロパティを設定していても何も表示されません。

一方でdisplayプロパティとwidth、heightプロパティの指定がある方はちゃんと::before疑似要素が表示されています。

::before・::after疑似要素とcontentプロパティと共によくpositionプロパティが利用されます。positionプロパティで疑似要素の表示位置を調整するために利用されます。

このpositionプロパティが必要なところになかったり、設定を間違えていると疑似要素は正しく表示されません。

上記のサンプルコードでは「テスト」のテキストの下に青い四角を疑似要素で表示しようとしています。

前者ではposition:relativeが.sample-1にされていないため、absoluteで指定した疑似要素が正しく表示されていません。

後者はposition: relativeを設定しているため、正しく表示できています。

CSSで全角文字を入力していたり、記号を間違えている場合など文法ミスで疑似要素が正しく表示されていない事があります。

下記のサービスからCSSの文法チェックが出来ますので、一度文法ミスが無いかチェックしてみましょう。