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

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>など要素内にコンテンツがないタグ(わかりやすく言えば閉じタグがないもの)には擬似要素が効かないらしい。

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