Псевдоэлемент CSS: после границы?

Question

У меня проблема.

Я хочу добавить изображение shadow.jpg под каждым изображением с классом ".shadowed".

Итак:

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

А потом мы используем: после:

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

}

Хорошо, это выглядит хорошо, но тень также получает границы своих родителей, как:

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

И я так хочу:

1. ГРАНИЦА
2. IMAGE
3. ГРАНИЦА
4. SHADOW

Так как же избежать: после наследования границы?

Я знаю, что могу поместить все в span и использовать: возможно, граница «первый ребенок» или что-то в этом роде, но я не хочу, это испортит мою разметку.

Или, может быть, есть еще один простой способ поставить изображение за изображением ( PHP разрешен ).

Приветствия:)

Answer 1

Сделай так. Это должно решить проблему.

.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%;
}

Answer 2

: before и: after ссылается на Content элемента, а не на его рамку. Я думаю, что вы, возможно, сделали свой трюк с диапазоном переноса.