修复Chrome中因滚动条隐藏导致的CSS宽度动画异常问题

嗨，我之前碰到过类似的Chrome滚动条相关的布局bug，咱们一步步来搞定这个问题：

先修复一个小语法错误 #

你的nav ul样式里有个笔误：padding 0少了冒号，应该写成padding: 0;，这个小问题可能会导致导航列表的布局偏移，先把它修正：

nav ul {
  margin: 0;
  padding: 0; /* 修复拼写错误，添加冒号 */
  list-style: none;
}

核心修复：给伪元素添加left: 0 #

你当前的导航项伪元素（a::before和div::before）没有设置left属性，绝对定位的元素默认会基于自身位置计算偏移。当Chrome隐藏滚动条后，页面可视宽度发生变化，最右侧的导航项伪元素定位会出现偏差，导致鼠标离开时过渡动画无法正确触发收缩。

修改这两个伪元素的样式，加上left: 0固定起始位置：

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: aliceblue;
  position: absolute;
  top: 10px;
  left: 0; /* 新增：固定伪元素从导航项左侧开始 */
  width: 0px;
  transition: all ease-in-out 250ms;
}

nav div::before {
  content: '';
  display: block;
  height: 5px;
  background-color: aliceblue;
  position: absolute;
  top: 0;
  left: 0; /* 新增：固定伪元素从导航项左侧开始 */
  width: 0px;
  transition: all ease-in-out 250ms;
}

可选优化：防止伪元素溢出 #

如果修改后还有问题，可以给header加上overflow: hidden，确保伪元素不会超出导航栏范围，避免浏览器因为元素溢出而无法正确识别鼠标离开事件：

header {
  background: #202124;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  overflow: hidden; /* 新增：隐藏溢出的伪元素 */
}

为什么这些修改有效？ #

• 语法错误修复确保导航列表布局没有意外的padding偏移，让所有导航项的位置计算更准确
• left: 0固定了伪元素的起始位置，不管页面宽度怎么变化（比如隐藏滚动条），伪元素的宽度动画都会从导航项左侧开始，鼠标离开时能正确收缩回0宽度
• overflow: hidden避免伪元素溢出到页面外部，确保浏览器能正确捕获鼠标离开导航项的事件，触发过渡动画的结束状态

你试试这些修改，应该就能解决Chrome里最右侧导航项的悬停条不消失的问题了！

内容的提问来源于stack exchange，提问作者Franco