:after pseudo selector on an image? CSS

Question

Im trying to use the pseudo selector :after on an img tag to output an empty red div, only it isn't showing anything? am I using this correctly?...

img:after {background:red; content:'2'; height:100px; width:100px;}

Jsfiddle

http://jsfiddle.net/MLReC/1/

Answer 1

:after and other pseudo elements will not work with replaced elements such as img, input etc..

Answer 2

you can put your image inside a div,p,etc.. tags and set :after selector on them.

HTML:

 <p>
    <img src="http://www.placehold.it/100x100" />
</p>

CSS:

p:after{background:red; content:'2'; height:100px; width:100px;}