疑似要素が使えないタグ
2023/10/09
HTML
疑似要素が使えないタグとは
<img>タグに疑似要素を使ってアニメーションをつけようと思たところ、まったく出現せず・・・。
調べてみると、<img>,<input>,<textarea>などは疑似要素が使えないようです。
下のコードは<h1>タグに疑似要素を設定して「Hellow Workd!」の前に「●」を表示させています。
See the Pen
Untitled by Ryosuke (@Ryosuke-the-flexboxer)
on CodePen.
次に、<img>タグに疑似要素を用いて「●」をつけようとすると・・・
See the Pen Untitled by Ryosuke (@Ryosuke-the-flexboxer) on CodePen.
疑似要素が効いていないため、画像の前に「●」はつきません。
これを<img>タグをかこっている<div>タグに疑似要素を設定してみます。
See the Pen
Untitled by Ryosuke (@Ryosuke-the-flexboxer)
on CodePen.
画像の前に「●」が表示されました。
疑似要素を使いたい場合は、divタグなどで囲って使おう
疑似要素が使えないタグでも、divなどで囲ってしまい、囲った要素に対して疑似要素を設定してあげれば解決します。
ぜひ試してみてください！