为什么不：在伪元素与`img`元素一起工作之前和之后？
这个问题在这里已经有了答案：
规范说...
注意。 本规范没有完全定义:before和:after的替换元素（如HTML中的IMG）的交互。 这将在未来的规范中更详细地定义。
我想这意味着他们不能使用img元素（现在）。
也看到这个答案。
只是为了测试和知道它不是很漂亮，你可以做下面的事情来使伪元素与'img'元素一起工作。
添加： display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px到CSS中的img元素。
虽然它会使你的img标签成为content: ""空白原因content: ""你可以
在html中添加： style="background-image: url(image.jpg)"到你的img元素。
在Fx，Chrome和Safari中对此进行了测试
可能是浏览器供应商没有在img标签上实现伪元素，因为他们对规范的解释：严格来说， img元素不是块级元素或内联元素，它是一个空元素。
上一篇: Why don't :before and :after pseudo elements work with `img` elements?