use :after to put a box on an image - not working

Question

I am trying to add a gray bar across an image using css :after

When I try the below the image appears, but not the red box. If I replace the image with a p tag with the same class then it works as expected.

Why can't I see the red box on top of the image?

<div id="wrapper">
<img class="grayborder" src="mad-dogs-eyes.jpg" height="450" width="322" alt="two mad dogs " />
</div>

css:

#wrapper {
    width:1000px;
    margin:0 auto;
    position:relative;
    z-index:100;
}


img:after {
    content: "";
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    top:100px;
    right:10px;
    z-index:1001;
}

Answer 1

img elements are replaced elements, you cannot use pseudo elements with them, you will need to apply your after to the parent div #wrapper, or wrap the img in another element

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and . Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

Demo Fiddle