要素内にコンテンツがないタグには擬似要素が使えない

要素内にコンテンツがないタグには擬似要素が使えないコーディング

imgタグに擬似要素が反映されなかった話


コーディングの勉強をしていたらハマった。


HTML

<a href="#">
   <img src="images/image1" alt="イメージ" class="image">
   <div class="category">イメージ</div>
</a>

CSS

img::after { 
    content: '';
    top: 60px;
}

imgタグに::after(擬似要素)を設定しても上部に空欄が入らない。


CSS変更後

a::before { 
    content: '';
    top: 60px;
}

imgタグをaタグに変更するとうまく動いてくれた!


まとめ


調べてみると今回の<img>、<br>や<input>など要素内にコンテンツがないタグ(わかりやすく言えば閉じタグがないもの)には擬似要素が効かないらしい。

コーディング初心者の方は気をつけてください〜^^

コメント