Why isn't img:after working?

Question

Sorry if this question already exists, but I didn't manage to find it. I am wondering why img:after in CSS is not working. I tried setting the display of the img to be block and what not, but it refuses to work every time...Any ideas? I am trying to place a background image after an image (for oldschool shadow), but it works only if I place the image in a div/span.

That's what I've been trying to run:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise2</title>
        <link rel="stylesheet" type="text/css" href="exercise2.css">
    </head>
    <body>
        <div id="container">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJxP3c9QZ--VxiX0M1p9shvBa0KDLGjTjlqC3V4ygH_zA6vn-Bvw">
        </div>
    </body>
</html>

CSS:

#container {
    width: 100%;
}

img {
    display: block;
}

.shadow:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    top: 10%;
    content: "";
    height: 90%;
    width: 6px;
    background: url(pictures/shadow_side.png) repeat-y 0% 0%;
}

This is answered here (by spec).... http://stackoverflow.com/questions/11903273/why-the-before-and-after-pseudo-elements-work-only-in-firefox — Split Your Infinity, Dec 28 '13 at 00:15
Most browsers don't support it. According to a similar question: http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags — Jeremy, Dec 28 '13 at 00:16

Sampson · Accepted Answer · 2013-12-28T00:22:11.903

3

Think of the :after pseudo-element as something like :last-child. It adds a pseudo-element within the containing element, after the element's document tree. Images have an empty content model, meaning you cannot place another element (or pseudo-element) inside them.

edited Dec 28 '13 at 00:22

answered Dec 28 '13 at 00:16

Sampson

265,109
74
539
565

This is not quite correct. The determining factor is not whether an element has a empty content model, but whether it is a replaced element or not. As proof, see http://jsfiddle.net/ZeAj4/ where the void element `meta` is used yet its `:before` pseudo-element content is rendered nonetheless. – Alohci Dec 28 '13 at 02:03
@Alohci That makes sense; do you know of a place in the specification that states that more explicitly? [The specification](http://www.w3.org/TR/selectors/#gen-content) only connects them to the *content* of an element. – Sampson Dec 28 '13 at 15:48
I don't unfortunately. I have to say I've always found the specs rather sparse on the matter of replaced elements. It seems like they fall down the gap between HTML and CSS, so I've taken to just testing for de-facto behaviour. – Alohci Dec 28 '13 at 19:38

Igor Šarčević · Answer 2 · 2013-12-28T00:18:18.387

2

The specs says

Note. This specification does not fully define the interaction of :before and :after with > replaced elements (such as IMG in HTML). This will be defined in more detail in a future > specification.

So that would probably mean, that :after and :before don't work with img elements

edited Dec 28 '13 at 00:18

answered Dec 28 '13 at 00:13

Igor Šarčević

3,481
1
19
21

score 1 · Answer 3 · answered Dec 28 '13 at 00:18

Images contain nothing inside them (they close themselves). And since the :before and :after append stuff inside the element (check out this awesome article by Chris Coyier), you cannot simply just add some stuff by the :before and :after selectors in an <img> tag.

And even if you could, your <img> tag has no class="shadow", which it should have.

Why isn't img:after working?

3 Answers3