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. BORDER
2. IMAGE
3. BORDER
4. SHADOW

那么如何避免：边界继承之后？

我知道我可以把所有的东西放在一个跨度上并使用：可能是第一个孩子的边框，或者类似的东西，但我不想这样会弄乱我的标记。

或者，也许还有另一种简单的方法将图像放在图像之后（PHP允许）。

干杯:)

Answer 1

：前和：是指该元素的内容后没有它的边界框..我想你可能必须做你的绝招与包装跨度。

Answer 2

这样做。这应该可以解决问题。

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