本文详解如何让 ::before 伪元素的 width: 100% 精确匹配其直接宿主元素（而非最近定位上下文祖先）的宽度，解决导航项悬停时下划线/背景动画溢出到整个父容器的常见问题。核心在于正确设置定位上下文。
本文详解如何让 `::before` 伪元素的 `width: 100%` 精确匹配其**直接宿主元素**（而非最近定位上下文祖先）的宽度，解决导航项悬停时下划线/背景动画溢出到整个父容器的常见问题。核心在于正确设置定位上下文。
在 CSS 中，::before 和 ::after 是强大的装饰性伪元素，常用于实现下划线伸缩、背景滑入、图标浮现等悬停动效。但一个高频踩坑点是：当为 <a> 或 <div> 添加 position: absolute 的 ::before 并设 width: 100% 时，该宽度并非自动继承其宿主元素（即伪元素所依附的元素）的宽度，而是取决于其最近的已定位（position: relative/absolute/fixed）祖先元素的宽度。
在你的导航栏代码中，.nav-bar-items::before 的 width: 100% 实际取的是 .nav-buttons（或更外层 .container）的宽度——因为 .nav-bar-items 本身未声明定位属性，导致其 ::before 脱离文档流后，以最近的 position: relative 祖先（如 .nav-buttons）为参考系计算 100%，从而造成“整行变色”而非“单个菜单项高亮”。
✅ 正确解法：为伪元素的直接宿主元素显式添加 position: relative
.nav-bar-items {
position: relative; /* ✅ 关键！创建新的定位上下文 */
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
transition: color 0.5s ease;
}这样，.nav-bar-items::before 和 ::after 的 width: 100% 将严格等于 .nav-bar-items 自身的内容盒宽度（content box width），动画效果将精准限定在当前导航项内。
立即学习“前端免费学习笔记（深入）”；
? 补充说明与最佳实践：
为什么必须是 relative？
position: relative 不改变元素文档流位置，但会创建一个新的包含块（containing block），使后代绝对定位元素（如 ::before）的百分比尺寸（width, height, top, left 等）以此元素为基准计算。避免 position: static 的陷阱
默认 position: static 不构成定位上下文，此时 ::before 会向上查找最近的 relative/absolute/fixed 祖先——这正是你遇到问题的根本原因。-
精简 & 高性能写法示例（推荐）
下划线动画无需 ::after，单用 ::before 即可；同时建议明确过渡属性，避免 transition: all 带来不必要的重绘：.nav-bar-items { position: relative; display: flex; align-items: center; padding: 0.5rem 0.75rem; color: #000; text-decoration: none; } .nav-bar-items::before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background-color: #e49c16; transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更自然的缓动 */ } .nav-bar-items:hover::before { width: 100%; } .nav-bar-items:hover { color: #fff; } -
进阶技巧：响应式与多态动画
若需支持从中间展开、两端延伸等效果，可结合 transform：/* 中间向两边展开 */ .nav-bar-items::before { left: 50%; transform: translateX(-50%); width: 0; } .nav-bar-items:hover::before { width: 100%; }
总结：::before 的 width: 100% 是否“按预期工作”，本质是 CSS 定位上下文的问题。永远确保伪元素的直接宿主元素具有 position: relative（或其他非 static 值），这是实现精准、可控、可复用悬停动画的基石。无需修改 HTML 结构，一行 CSS 即可修复布局语义错位。
