为什么没有 img:after 工作？ [复制]答案

【问题标题】：Why isn't img:after working? [duplicate]为什么没有 img:after 工作？ [复制]
【发布时间】：2014-01-15 13:39:39
【问题描述】：

对不起，如果这个问题已经存在，但我没能找到它。我想知道为什么 img:after 在 CSS 中不起作用。我尝试将 img 的显示设置为阻止，什么不是，但它每次都拒绝工作......有什么想法吗？我正在尝试在图像之后放置背景图像（用于老式阴影），但仅当我将图像放置在 div/span 中时它才有效。

这就是我一直试图运行的：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise2</title>
        <link rel="stylesheet" type="text/css" href="exercise2.css">
    </head>
    <body>
        <div id="container">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJxP3c9QZ--VxiX0M1p9shvBa0KDLGjTjlqC3V4ygH_zA6vn-Bvw">
        </div>
    </body>
</html>

CSS：

#container {
    width: 100%;
}

img {
    display: block;
}

.shadow:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    top: 10%;
    content: "";
    height: 90%;
    width: 6px;
    background: url(pictures/shadow_side.png) repeat-y 0% 0%;
}

【问题讨论】：

这里回答（按规范）......stackoverflow.com/questions/11903273/…
大部分浏览器不支持。根据一个类似的问题：stackoverflow.com/questions/5843035/…
你连.shadow都不用？

标签： html css

【解决方案1】：

将:after pseudo-element 视为类似于:last-child。它在元素的文档树之后添加一个伪元素 within 包含元素。 Images 有一个 empty content model，这意味着你不能在其中放置另一个元素（或伪元素）。

【讨论】：

这不太正确。决定因素不是元素是否具有空内容模型，而是它是否是替换元素。作为证明，请参阅jsfiddle.net/ZeAj4，其中使用了 void 元素 meta，但它的 :before 伪元素内容仍然被渲染。
@Alohci 这是有道理的；你知道规范中有一个地方更明确地说明了这一点吗？ The specification 仅将它们连接到元素的内容。
不幸的是，我没有。我不得不说我一直发现关于替换元素的规范相当稀疏。似乎它们缩小了 HTML 和 CSS 之间的差距，所以我只测试了事实上的行为。

【解决方案2】：

图像内部没有任何内容（它们会自行关闭）。由于:before 和:after 在元素内附加了一些东西（查看this awesome article by Chris Coyier），你不能简单地通过:before 和:after 选择器在<img> 标记中添加一些东西。

即使可以，您的<img> 标签也没有应该有的class="shadow"。

【讨论】：

【解决方案3】：

规格说明

注意。该规范没有完全定义 :before 和 :after 与 > 替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

所以这可能意味着 :after 和 :before 不适用于 img 元素

【讨论】：