imgタグにはbefore要素とafter要素（疑似要素）が作れない

imgタグには疑似要素がつけれないらしい！
というのでハマったのでメモ。

imgに疑似要素が使えない

例えばこういうHTMLがあって。

<img class="myimg" src="https://engineering.dn-voice.info/hogehoge.jpg" />
<div class="myimg">これはいける</div>

スタイルをこんな感じにすると。

.myimg{
	position:relative;
}
.myimg:after{
	content:"hoge";
	position:absolute;
}

divの方には「hoge」が表示されるけど、
imgには表示されない。

imgには疑似要素が使えないという仕様らしい。

閉じタグがない要素は使えないらしい

imgには閉じタグがないから、疑似要素は表示されないらしい。

ということは、brもダメなんか？

<br class="myimg" />

やってみたけど、やっぱり疑似要素は表示されない。
brでそんなことする場面はあんまりないと思うけど。。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

posted with カエレバ

狩野 祐東 SBクリエイティブ 2016-10-27

Amazon

楽天市場

7net

HTML5&CSS3レッスンブック

posted with カエレバ

エビスコム ソシム 2013-05-24

Amazon

楽天市場

7net