为什么“::after”伪元素背景设置不完全生效?
出现“::after”伪元素背景设置不完全生效的原因就在于将该伪元素设置为绝对定位(position: absolute)。
在设置了绝对定位之后,如果没有指定定位信息,伪元素就会出现在元素原来的位置,并且移出文档流之外。因此,选中“::after”伪类后,浏览器高亮的元素部分会超出“li”元素的可见范围(由于应用了“overflow:hidden”)。
要解决此问题,只需将“::after”伪类的“left”值设置为“0”即可。
另外,指向红色的两个数字表示的是“::after”伪元素在调整定位方式为绝对定位之后的定位信息,即“left”和“top”属性的数值。在非定位元素中,这四个属性(“left”、“top”、“right”、“bottom”)无效,因此在“开发人员工具”的“盒模型”视图中不会显示。
以上就是为什么“::after”伪元素背景设置不完全生效?的详细内容,更多请关注其它相关文章!