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

Question

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

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

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

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

Answer 1

img标记不能包含子元素.因为img是一个void元素,它的内容模型永远不允许它在任何情况下都有内容.

::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";
}