这里的 ::after 伪元素设置背景不完全生效，原因和解决方法
本文将讨论在使用 ::after 伪元素设置背景时遇到的背景不完全生效的问题，并提供解决方案。
问题
一个开发者在使用 ::after 伪元素设置背景时遇到了一个问题，即背景没有完全生效。具体表现为：
- 背景颜色仅部分显示，并未覆盖整个元素宽度。
原因
该问题是由给 ::after 伪元素指定了 position: absolute 绝对定位引起的。
- 在未指定定位信息的情况下，设置为绝对定位的元素会脱离文档流，出现在元素原本的位置。
- 由于 li 元素设置了 overflow: hidden，脱离了文档流的 ::after 伪元素会被隐藏在 li 元素中。
解决方案
要解决此问题，只需指定 ::after 伪元素的 left 值为 0，使其与 li 元素左边缘对齐即可。
第二个问题
在定位问题中，还有一个附加问题：
- 问题： 另一个开发者注意到，在未将 ::after 伪元素设置为绝对定位时，定位信息中没有显示元素的定位数据。
- 原因： 非定位元素的 left、top、right 和 bottom 定位属性无效，因此不会在盒模型视图中显示。
总结
通过指定 ::after 伪元素的 left 值为 0，可以解决 ::after 伪元素背景不完全生效的问题。同时，了解非定位元素的定位属性无效这一点至关重要，因为它影响了盒模型视图中定位信息的显示。
