求助：hover时文字下划线过渡效果失效，宽度无动画（Chrome最新版）

问题根源 #

你的代码存在几个核心问题，导致过渡动画无法生效：

1. 伪元素::before仅在hover状态下才被创建，没有初始状态，浏览器无法计算过渡效果
2. 父元素.about未设置position: relative，绝对定位的伪元素会脱离正常文档流，位置混乱
3. 重复定义.about:hover::before规则，样式被覆盖，过渡属性逻辑冲突

修正后的代码 #

CSS 代码 #

.about {
  height: 50px;
  width: 200px;
  text-align: center;
  position: relative; /* 让伪元素相对该元素定位 */
  line-height: 50px; /* 让文字垂直居中，优化视觉效果 */
}

/* 伪元素初始状态：隐藏，锚点在左侧 */
.about::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  transform: scaleX(0);
  transform-origin: left center; /* 设定缩放起点为左侧，实现从左到右展开 */
  transition: transform 0.5s ease; /* 仅针对transform属性设置过渡动画 */
}

/* hover时触发缩放，显示下划线 */
.about:hover::before {
  transform: scaleX(1);
}

HTML 代码 #

<div class="about">About</div>

关键修改说明 #

• 给.about添加position: relative：确保伪元素的绝对定位是相对于父元素，而非整个页面
• 拆分伪元素样式为初始状态和hover状态：初始状态就创建伪元素并通过scaleX(0)隐藏，hover时仅修改transform属性，让浏览器能正常计算过渡动画
• 设置transform-origin: left center：指定下划线的缩放起点为左侧，实现从左到右的展开效果
• 简化过渡属性：仅对transform设置过渡，比all更高效，避免不必要的属性变化

修改后在Chrome浏览器中，hover时就能看到下划线从左到右平滑展开的效果了。

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