使用:: after后使用图片标签？

Question

是否可以使用::after伪选择器将文本附加到图像？

img[src="images/interface-zoom-buttons.png"]::after {
    content: "these are the zoom buttons";
}

希望使用选择器为多个HTML文档中反复使用的图像提供标题（其他样式将应用于选择器的内容）。

在上面的示例中，图像正确显示，您可以看到已应用了相应的CSS，但输出中未显示内容（由选择器提供）。

Answer 1

img标签不能包含子元素。因为img是void element，其内容模型永远不允许它在任何情况下都有内容。

::after创建一个伪元素作为其父元素的最后一个子元素。

所以img::after最终不起作用，因为浏览器不会根据定义允许它。

您可以做的是在容器中包含img并在容器上放置::after。

演示 http://jsfiddle.net/x2za91jw/

HTML

<div class="container">
    <img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>

CSS

.container {
    position: relative;
}
.container::after {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    content:"these are the zoom buttons";
}