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

CSSの::before・::afterの疑似要素が効かない場合の原因と対処法についてサンプルコード付きで解説します。contentプロパティがなかったり、positionの指定が間違っているなどいくつかの失敗パターンを紹介します。

コンテンツ [表示]

  1. 1CSSの::before・::afterの疑似要素が効かない
  2. 2CSSの::before・::afterの疑似要素が効かない場合の対処法
  3. 2.1contentプロパティの指定が無い
  4. 2.2contentが空なのにdisplay指定やサイズ指定が無い
  5. 2.3positionの指定を間違えている
  6. 2.4CSSの文法ミス

CSSの::before・::afterの疑似要素が効かない

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

::before
CSSの::beforeは疑似要素の一つで対象のセレクターの子要素の最初の要素として擬似的な要素を生成します。contentプロパティとよくセットで利用されますが、その使い方をサンプルコード付きで解説します。
::after
CSSの::after(:after)は疑似要素の1つで、指定したセレクタの要素の最後の子要素として擬似的な要素を生成します。::afterの構文や使い方についてサンプルコード付きで解説します。

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

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

Photo byPexels

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

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

contentプロパティの指定が無い

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

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

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

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

contentが空なのにdisplay指定やサイズ指定が無い

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

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

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

positionの指定を間違えている

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

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

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

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

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

CSSの文法ミス

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

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

The W3C CSS Validation Service
GeekHive採用サイト

関連記事