CSS伪元素：:after是否可以放在边框之外？

Question

我有一个问题。

我想在每个带有类名“ .shadowed ”的图像下添加一个 shadow.jpg 图像。

因此：

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

然后我们使用 :after:。

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

好的，看起来还不错，但阴影也会继承其父元素的边框，如下所示：

1. 边框
2. 图像
3. 阴影
4. 边框

我希望它是这样的：

1. 边框
2. 图像
3. 边框
4. 阴影

那么如何避免 :after 边框的继承？

我知道我可以把所有东西都放在 span 中，并可能使用 :first-child 边框之类的东西，但我不想这样做，因为它会搞乱我的标记。

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

干杯 :)

- fomicz

---

为什么需要使用PHP来解决CSS问题？ - acm

如果没有CSS的帮助，我准备使用PHP（仅当它不会使用大量服务器内存/ CPU并且不会使页面加载变慢）。 - fomicz

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

- Louie Almeda

Answer 2

:before和:after指的是元素的内容而不是边框盒子。我认为你可以用包装span来实现你的技巧。

- Chris Bentley