当使用 ::after 伪元素实现导航项悬停背景动画时，文字被遮盖的主因是层级（z-index）未正确设置；只需为 <a> 标签显式声明 z-index: 1 并配合 position: relative，即可确保文字始终位于动画层之上。
当使用 `::after` 伪元素实现导航项悬停背景动画时，文字被遮盖的主因是层级（z-index）未正确设置；只需为 `` 标签显式声明 `z-index: 1` 并配合 `position: relative`，即可确保文字始终位于动画层之上。
在 CSS 中，z-index 仅对定位元素（即 position 值为 relative、absolute、fixed 或 sticky 的元素）生效。你原代码中虽为 <a> 设置了 position: relative，但错误地将 z-index: relative（这是无效值 —— relative 是 position 的取值，不是 z-index 的合法值），导致浏览器忽略该声明，<a> 默认处于堆叠上下文底层，被后续绘制的 ::after 伪元素完全覆盖。
✅ 正确做法是：
- 将 z-index: relative 改为 z-index: 1；
- 保持 position: relative（必要前提）；
- 同时确保父容器（如 h4）不意外创建新的堆叠上下文而限制子元素层级（当前代码中 h4 无 z-index，符合预期）。
以下是修复后的关键 CSS 片段（已优化可读性与健壮性）：
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav-part2 h4 {
padding: 10px 20px;
border: 1px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8a8a8a89;
border-radius: 50px;
font-weight: 500;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000bb;
position: relative; /* 为子元素提供定位参考 */
font-size: 18px;
transition: all 0.4s ease;
overflow: hidden;
}
/* 悬停背景：绝对定位于 h4 内部，初始隐藏 */
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav-part2 h4::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b666;
border-radius: 50%;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s ease, border-radius 0.4s ease;
}
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav-part2 h4:hover::after {
transform: scaleY(1);
border-radius: 0;
}
/* 关键修复：提升链接文字层级 */
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav-part2 h4 a {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000bb;
text-decoration: none;
position: relative; /* 必须定位才能启用 z-index */
z-index: 1; /* 确保文字在 ::after 之上 */
display: block; /* 推荐：使点击区域更完整 */
}
/* 文字悬停变色（可选增强体验） */
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav-part2 h4:hover a {
color: white;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要滥用 z-index：避免全局高数值（如 z-index: 9999），推荐从 1 开始按需递增；
- HTML 结构需闭合：你示例中 <h4><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Studio</h4> 缺少 </a>，务必修正为 <h4><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Studio</a></h4>，否则 DOM 异常可能导致样式失效；
- box-sizing: 0 是无效写法，应改为 box-sizing: border-box；
- font-family: border-box 明显笔误，应替换为实际字体族（如 system-ui, sans-serif）。
通过以上调整，悬停时灰色背景平滑上推展开，而链接文字稳定显示于最上层，清晰可读，交互体验专业可靠。
