Saber 酱的抱枕

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

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

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

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

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

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

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

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