本文详解如何让 ::before 伪元素的 width: 100% 精确匹配其直接生成元素（即伪元素所属的宿主元素）的实际内容宽度，而非整个父容器，关键在于正确设置 position: relative 以建立定位上下文。
本文详解如何让 `::before` 伪元素的 `width: 100%` 精确匹配其**直接生成元素（即伪元素所属的宿主元素）的实际内容宽度**，而非整个父容器，关键在于正确设置 `position: relative` 以建立定位上下文。
在 CSS 中，::before 和 ::after 是依附于宿主元素（generating element）的伪元素，其尺寸（如 width: 100%）默认参考的是最近的已定位祖先（positioned ancestor），而非宿主元素自身。若宿主元素未设置定位（如 position: relative），而其祖先（如 .nav-buttons 或 .container）恰好是已定位元素，则 ::before 的 100% width 将取自该祖先的宽度——这正是你遇到“整个导航栏背景都被激活”问题的根本原因。
✅ 正确做法：为宿主元素显式添加 position: relative
只需将 .nav-bar-items（即 元素）设为相对定位，即可为其内部的 ::before/::after 创建独立的定位上下文：
.nav-bar-items {
position: relative; /* ? 关键！创建新的 containing block */
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
transition: color 0.5s ease;
color: #000;
}
此时，以下伪元素规则中的 width: 100% 将严格对应 .nav-bar-items 自身的内容盒宽度（content box width），而非外层 .nav-buttons 或 .container：
.nav-bar-items::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 0.1em;
width: 0; /* 初始隐藏 */
background-color: rgb(228, 156, 22);
transition: width 0.5s ease;
}
.nav-bar-items:hover::before {
width: 100%; /* ✅ 现在真正占满当前 a 标签的宽度 */
}
? 原理说明：position: relative 不改变元素文档流位置，但会使其成为后代绝对定位元素（如 ::before）的 containing block。width: 100% 在绝对定位上下文中，即等于该 containing block 的 content width —— 完美实现“仅作用于当前导航项”。
⚠️ 常见误区与注意事项
- 不要依赖父容器定位：若仅给 .nav-buttons 设 position: relative，则所有 .nav-bar-items::before 都会以 .nav-buttons 宽度为基准（可能达 400px），导致动画跨项“溢出”。
- 避免 transition: all：建议明确指定过渡属性（如 transition: width 0.5s ease），防止因 color、opacity 等隐式触发重绘影响性能。
- z-index 谨慎使用：.nav-bar-items::after 中 z-index: -1 可能导致点击穿透，若需交互，请改用 z-index: 1 + pointer-events: none 配合子元素 pointer-events: auto。
- 响应式兼容性：width: 100% 在 Flex 容器中表现稳定，但若宿主元素含 flex-grow，建议结合 min-width: 0 防止过度拉伸。
✅ 最终效果验证
修改后，悬停任一导航项（如 “Projets” 或 “Contacts”）时：
- 下划线（::before）仅在其对应 标签宽度内从左向右展开；
- 底部高亮背景（::after）也精确贴合该标签区域，无跨项干扰；
- 文本颜色变化与动画解耦，过渡更自然。
通过这一最小干预（仅一行 position: relative），即可彻底解决伪元素尺寸失控问题——这正是 CSS 定位上下文（containing block）机制的经典实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
