为什么“::after”伪元素背景设置不完全生效？

大家好，今天本人给大家带来文章《为什么“::after”伪元素背景设置不完全生效？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

出现“::after”伪元素背景设置不完全生效的原因就在于将该伪元素设置为绝对定位（position: absolute）。

在设置了绝对定位之后，如果没有指定定位信息，伪元素就会出现在元素原来的位置，并且移出文档流之外。因此，选中“::after”伪类后，浏览器高亮的元素部分会超出“li”元素的可见范围（由于应用了“overflow:hidden”）。

要解决此问题，只需将“::after”伪类的“left”值设置为“0”即可。

另外，指向红色的两个数字表示的是“::after”伪元素在调整定位方式为绝对定位之后的定位信息，即“left”和“top”属性的数值。在非定位元素中，这四个属性（“left”、“top”、“right”、“bottom”）无效，因此在“开发人员工具”的“盒模型”视图中不会显示。

理论要掌握，实操不能落！以上关于《为什么“::after”伪元素背景设置不完全生效？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！