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>など要素内にコンテンツがないタグ(わかりやすく言えば閉じタグがないもの)には擬似要素が効かないらしい。
コーディング初心者の方は気をつけてください〜^^
コメント