为什么:before和:after伪元素不能与‘don’元素一起工作？
为什么:before和:after伪元素不能与‘don’元素一起工作？
提问于 2011-09-13 11:22:34
我正在尝试使用带有img元素的:before pseudo element。
考虑一下这个HTML和CSS...
HTML
<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />CSS
img:before {
content: "hello";
}这不会产生想要的效果(在Chrome 13和Firefox 6中测试)。但是，它适用于div或span元素。
为什么不行？
有没有一种方法可以让伪元素与img元素一起工作？
回答 2
Stack Overflow用户
发布于 2012-06-15 00:18:41
浏览器供应商可能没有在img标记上实现伪元素，因为他们对规范进行了解释:严格地说，img元素不是块级元素或内联元素，它是empty element。
Stack Overflow用户
发布于 2012-09-01 16:19:20
只是为了测试和了解它并不美观，您可以执行以下操作来使伪元素与'img‘元素一起工作。
将：display: block; content: ""; height: (height of image)px添加到CSS中的img元素。
尽管它将呈现您的img标记为空，但由于content: ""的原因，您可以
将：style="background-image: url(image.jpg)"添加到html中的img元素中。
在Fx、Chrome和Safari中进行了测试
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7396469
复制相关文章
相似问题