0
0
心靈之曲
发布时间：2024-11-04 17:15:28
|493人浏览过
|来源于php中文网
原创
在示例代码中，由于给::after伪元素设置了absolute定位，导致其脱离了文档流。
当::after伪元素设置absolute定位后，如果没有设定left/right/top/bottom等定位信息，它将默认位于元素左上角并移出文档流。因此，你给::after伪元素设置的background-color不会完全生效，因为超出li元素可见范围（overflow: hidden）的部分被覆盖了。
红色箭头指出的数字是::after伪元素的绝对定位信息："0px"和"100%"，分别表示相对于其父元素的left和width。将::after伪元素的left值设为0可以解决问题。
nav li::after {
position: absolute;
background-color: orangered;
bottom: 0;
height: 3px;
width: 100%;
left: 0; /* 新加的属性 */
} 相关文章
如何设计一个个人博客首页_通过HTML和CSS搭建个人博客网站
css绝对定位元素超出容器怎么办_利用父元素position约束
css 引入失败但控制台不报错怎么办_css 隐性错误排查
css web 安全色还有必要了解吗_通过历史和兼容性进行说明
css选择器性能瓶颈怎么排查_通过减少全局和深层匹配优化
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
overflow是一个用于控制元素溢出内容的属性，当元素的内容超出其指定的尺寸时，overflow属性可以决定如何处理这些溢出的内容。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
1765
2024.08.15
li是HTML标记语言中的一个元素，用于创建列表。li代表列表项，它是ul或ol的子元素，li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。
419
2023.08.03
2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。
72
2026.01.31
热门下载
相关下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
