:before伪元素width过渡动画失效问题求助

我之前也碰到过一模一样的坑！问题出在你的伪元素缺少过渡的初始状态，浏览器没法识别属性的变化过程，所以直接跳变显示，不会播放过渡动画。

关键修复点： #

• 给:before伪元素设置初始width: 0，让hover时的宽度变化有明确的起始值
• 补全伪元素的定位属性和必要样式，确保它能正确渲染在目标位置

修正后的完整代码示例： #

.header__navigation { 
  display: flex; 
} 

.header__navigation .nav { 
  margin: 0 30px; 
} 

.header__navigation .nav > div { 
  position: relative; 
  padding-bottom: 8px; /* 给伪元素和文字留些间距 */
  cursor: pointer;
} 

.header__navigation .nav > div:before { 
  content: ''; /* 伪元素必须设置content，哪怕是空字符串，否则不会渲染 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* 初始宽度设为0，这是过渡动画的起始状态 */
  height: 2px; /* 伪元素的高度，比如下划线的厚度 */
  background-color: #2c3e50; /* 伪元素的颜色，可根据需求调整 */
  transition: width 0.4s ease; /* 明确过渡属性、时长，加ease让动画更自然 */
}

/* hover时触发宽度扩展 */
.header__navigation .nav > div:hover:before { 
  width: 100%; 
}

为什么原来的代码不生效？ #

1. 缺少content: ''：CSS伪元素必须设置content属性，哪怕是空值，否则浏览器会忽略这个伪元素
2. 无初始宽度值：如果伪元素默认宽度是auto或未定义，hover时直接设width: 100%，浏览器会认为是“从无到有”的元素创建，而非属性变化，因此不会触发过渡
3. 定位不完整：如果伪元素没设position: absolute，或者缺少left/bottom这类定位值，它的位置会不符合预期，甚至无法显示

把上面的代码替换进去测试，应该就能看到平滑的宽度扩展动画了！

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