CSS の before・after疑似要素 が効かない理由トップ3

after疑似要素とbefore疑似要素は色々な場面で便利

だけど なぜか効かないことがあって困ります。

その after疑似要素 が効かないありがちな理由トップ3 をまとめてみました。

疑似要素が効かなくて困ることあるので、自分用の覚え書きです。

理由1.contentプロパティを指定してないから

1つめは content プロパティを指定してないから

これが疑似要素が効かない理由で多い気がします。(実際これが多い)

 

例えば・・・ after疑似要素でボーダーをつけたくて、次のCSSを書いたとしましょう。

こういうのは絶対にNG!

そもそも content  プロパティがない場合、after疑似要素は一切表示されません。

 

なので次のように修正

なんかいらない感じもするんですが、
::after  とか ::before  については content  プロパティがないと要素として全く見えなくなります。

だから必ず付けるの忘れちゃダメ

理由2.positionプロパティの指定がおかしい

ありがちな理由2つ目がこれ

疑似要素とその親要素の position プロパティが正しく設定されてないから

 

例えばある要素に ::after  とか ::before  要素をくっつけたいとき・・・

こういう間違ったコードを書きがち

このコードは div.box  の左上に 100x100の疑似要素 を表示しようとしてます。

でも after疑似要素 にも 親要素 にも position  が指定されてないのが問題。
だから期待通りのデザインにならないはず(運よく動くことも稀によくある)

 

ただしくは各要素に position を指定するのが正解

▼ こういうCSSに修正

親には position: relative;  、after疑似要素には position: absolute;  を指定すればOK

これで親要素に対し、疑似要素の位置をいろいろ動かすことができます。

ちなみに親に position: relative;  を指定しなかった場合、
その上の position: relativel;  が指定されてる一番最初の要素への位置指定になる模様

意外と忘れがちだから、疑似要素を使うときはいつも注意してます。

理由3.jQueryから動的に疑似要素を追加してしまっている

3つめはCSS以外から要素を操作したいときに起こる問題

それが jQuery から疑似要素を無理やり追加しようとすること

実はjQueryからだと ::after  とか ::before  みたいなセレクタが指定できないです。

 

たとえばこういうコードはNG

こういう感じで ::after  や ::before  を使えないので要注意!

あと ::hover  とか ::visited  とか ::active  とか ::disabled  とか・・・そういう疑似クラスも使用不可(もしかしたら対応してる疑似クラスもあるかも?詳しくは知らない)

 

とはいえ、動的に疑似要素・疑似クラスを指定する方法がないわけでもないです

▼ 詳しくは次記事で解説したのでチェック

上のは疑似クラス(たとえば :hover  と :link  での場合)で説明したけど、同じことは ::after  、 ::before  でもできます。

jQueryから直に追加とかはできないけど、なんでも工夫次第ですね。
(ただし疑似要素の中身を直接更新とかはできないのが残念)

ここまでのまとめ

効かない理由トップ3

  1. contentプロパティを指定してない
  2. positionプロパティの指定がなんかおかしい
  3. 動的に疑似要素を追加してしまっている

まあ効かない理由なんて、挙げてればキリないですが・・・

でもよくある理由がこの3つなので、気を付けておけば無駄で苦痛な時間を過ごさなくてすみます。