CSS pseudo-element :after outside of a border?

Question

I've a problem.

I want to add an shadow.jpg image under every image with class ".shadowed".

So:

.shadowed {
    border: solid 1px #fff;
    margin: 15px;
}

And then we use :after:

.shadow:after {
     content: url('images/shadow.png');

}

OK it looks ok, but shadow also gets his parents border, like:

1. BORDER
2. IMAGE
3. SHADOW
4. BORDER

And I want it that way:

1. BORDER
2. IMAGE
3. BORDER
4. SHADOW

So how to avoid :after border inheritance?

I know I could put everything into span and use :first-child border probably, or something like that, but I don't want to, it will mess up my markup.

Or maybe there's another easy way of putting image after image (PHP allowed).

Cheers :)

Answer 1

:before and :after refers to the element's Content not it's border box.. I think you may have do your trick with the wrapping span.