带有：after伪元素的img标签上的奇怪行为？答案

【问题标题】：Strange behaviour on img tag with :after pseudo element?带有：after伪元素的img标签上的奇怪行为？
【发布时间】：2012-11-16 12:17:51
【问题描述】：

我昨天问了一个关于申请uneven shadow with CSS3 的问题，最终结果是this（我对此印象深刻！）

不幸的是，当我开始尝试在图像上使用它时，我最终得到了this（根本没有出现阴影）

我似乎无法弄清楚为什么会发生这种情况，我已经尝试消除 alt 文本（这没有帮助）但是给 img 一个空白的 src 属性修复它（显然虽然我不想这样做这个！）

我能想到的只是这可能与content:"" css 有关吗？我试过弄乱它，但一无所获。

我可以使用 div 来包装 img，并给它类，但最终我想避免这种情况。

【问题讨论】：

标签： html css

【解决方案1】：

所以只需将图像放在这样的 div 中。这可以接受吗？像这样：

<div class="container"><img src="http://intelligentpenguin.co.uk/blank_story.gif" alt="" /></div>

有一个相关问题here

显然它与“之前”和“之后”伪类有关。

【讨论】：

【解决方案2】：

你为什么不使用 div 周围

<div class="container">
    <img src="http://intelligentpenguin.co.uk/blank_story.gif " alt="" />
</div>

改变css就像

.container img{
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}

【讨论】：