saber酱的抱枕

哀哉京阿尼

06/5
12:03
学习

img元素不能使用after、before伪元素的研究

通过使用css的after、before伪元素,我们可以对html元素追加内容。今天我在对img元素使用after、before伪元素时发现不生效,后来确定是after、before伪元素对于img标签这类不支持内嵌其他标签的标签无效。

如下图,是对p标签使用after,正常。

::before ::after css img 伪元素 无效

注意,如果生效的话,我们在开发者工具里能看到红框处添加了伪元素。

下面是对img元素使用after,css规则是正确加载了的,但是没有给img标签追加伪元素。

::before ::after css img 伪元素 无效

后来我思考了一下,发现伪元素生效时,在html里追加的伪元素是位于标签内的。但img标签不能再嵌套其他标签,所以这时候伪元素就不生效了。

以此类推,其他一些不能嵌套子元素的标签应该一样不能使用after、before伪元素。

后来我去MDN上看了看这俩伪元素的定义,确实是这样。国内的一些网站上的资料则是说在元素前/元素后追加伪元素,害人不浅。

img元素不能使用after、before伪元素的研究