after疑似要素とbefore疑似要素は色々な場面で便利
だけど なぜか効かないことがあって困ります。
その after疑似要素 が効かないありがちな理由トップ３ をまとめてみました。
疑似要素が効かなくて困ることあるので、自分用の覚え書きです。
理由１．contentプロパティを指定してないから
１つめは content プロパティを指定してないから
これが疑似要素が効かない理由で多い気がします。（実際これが多い）
例えば・・・ after疑似要素でボーダーをつけたくて、次のCSSを書いたとしましょう。
|
1 2 3 |
div.box::after{ border: 1px solid lightgray; } |
こういうのは絶対にNG！
そもそも content プロパティがない場合、after疑似要素は一切表示されません。
なので次のように修正
|
1 2 3 4 |
div.box::after{ content: ""; border: 1px solid lightgray; } |
なんかいらない感じもするんですが、
::after とか
::before については
content プロパティがないと要素として全く見えなくなります。
だから必ず付けるの忘れちゃダメ
理由２．positionプロパティの指定がおかしい
ありがちな理由２つ目がこれ
疑似要素とその親要素の position プロパティが正しく設定されてないから
例えばある要素に ::after とか ::before 要素をくっつけたいとき・・・
こういう間違ったコードを書きがち
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** 親要素 */ div.box{ background: lightgreen; } /** after疑似要素 */ div.box::after{ content: ""; width: 100px; height: 100px; left: 0; top: 0; background:lightblue; } |
このコードは div.box の左上に 100x100の疑似要素 を表示しようとしてます。
でも after疑似要素 にも 親要素 にも
position が指定されてないのが問題。
だから期待通りのデザインにならないはず（運よく動くことも稀によくある）
ただしくは各要素に position を指定するのが正解
▼ こういうCSSに修正
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** 親要素 */ div.box{ position: relative; background: lightgreen; } /** after疑似要素 */ div.box::after{ content: ""; position: absolute; width: 100px; height: 100px; left: 0; top: 0; background:lightblue; } |
親には position: relative; 、after疑似要素には position: absolute; を指定すればOK
これで親要素に対し、疑似要素の位置をいろいろ動かすことができます。
ちなみに親に
position: relative; を指定しなかった場合、
その上の
position: relativel; が指定されてる一番最初の要素への位置指定になる模様
意外と忘れがちだから、疑似要素を使うときはいつも注意してます。
理由３．jQueryから動的に疑似要素を追加してしまっている
３つめはCSS以外から要素を操作したいときに起こる問題
それが jQuery から疑似要素を無理やり追加しようとすること
実はjQueryからだと ::after とか ::before みたいなセレクタが指定できないです。
たとえばこういうコードはNG
|
1 2 3 4 5 6 7 |
$(function(){ $('.boxa::after').css({ 'content': '""', 'position': 'relative' 'background': 'lightblue' }); } |
こういう感じで ::after や ::before を使えないので要注意！
あと ::hover とか ::visited とか ::active とか ::disabled とか・・・そういう疑似クラスも使用不可（もしかしたら対応してる疑似クラスもあるかも？詳しくは知らない）
とはいえ、動的に疑似要素・疑似クラスを指定する方法がないわけでもないです。
▼ 詳しくは次記事で解説したのでチェック
上のは疑似クラス（たとえば :hover と :link での場合）で説明したけど、同じことは ::after 、 ::before でもできます。
jQueryから直に追加とかはできないけど、なんでも工夫次第ですね。
（ただし疑似要素の中身を直接更新とかはできないのが残念）
ここまでのまとめ
効かない理由トップ３
まあ効かない理由なんて、挙げてればキリないですが・・・
でもよくある理由がこの３つなので、気を付けておけば無駄で苦痛な時間を過ごさなくてすみます。
