CSS pseudo-element :after outside of a border?

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. BORD开发者_如何学运维ER
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 :)

: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.

Do it like this. This should solve the problem.

.shadowed {
    border: solid 1px red;
    margin: 15px;
    position:relative;
}

.shadowed:after{
   content: url('images/shadow.png');
   display: block;
   position:absolute;
   left:0px;
   height:10px;
   bottom:-10px;
   width:100%;
}