CSS 伪元素 :after outside of a border?

Question

我有问题。

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

所以:

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

然后我们使用 :after:

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

}

好吧看起来没问题，但 shadow 也得到了他的 parent 边界，比如:

边框

图片

影子

边框

我想要这样:

边框

图片

边框

影子

那么如何避免 :after 边界继承呢？

我知道我可以将所有内容放入 span 并使用 :first-child border 或类似的东西，但我不想这样做，它会弄乱我的标记。

或者，也许还有另一种简单的方法可以在图像后放置图像( PHP 允许 )。

干杯:)

Answer 1

:before 和 :after 指的是元素的内容而不是边框​​。我想你可能已经用包装跨度做了你的伎俩。