如何在CSS中实现鼠标悬浮时下划线从中间向两侧展开动画？-css教程-PHP中文网

用::after伪元素配合transform:scalex()实现居中展开下划线，需设position:relative、content:""、transform-origin:center及transition，避免width动画以提升性能。

如何在css中实现鼠标悬浮时下划线从中间向两侧展开动画？

用 `::after` 伪元素配合 `transform: scaleX()` 实现居中展开

直接用 text-decoration: underline 无法控制动画起点，必须换伪元素方案。核心是让下划线初始缩放为 0、transform-origin: center，再通过 hover 触发 scaleX(1)。

下划线容器（如 a）需设 position: relative，否则 ::after 无法精确定位
::after 必须设 content: ""、display: block、height（建议 2px）和 background-color
动画需加在 ::after 上，不是父元素；否则会触发重排，影响性能
推荐用 transform: scaleX(0) 而非 width: 0，前者 GPU 加速，更流畅

关键 CSS 属性组合与常见错误

很多人写完发现下划线不动或偏移，多半是这几点没对齐：

left: 50% + transform: translateX(-50%) 是水平居中的安全写法，别只靠 left: 0
漏写 transition: transform 0.3s ease —— 没这个就没有动画，只有瞬切
transform-origin: center 必须写在 ::after 上，且不能被其他 transform 覆盖（比如同时用了 rotate）
如果父元素有 padding 或 line-height 异常，下划线 Y 轴位置容易错，用 bottom: -2px 微调更稳

完整可粘贴代码示例

/* 假设作用于链接 */
a {
  position: relative;
  color: inherit;
  text-decoration: none;
}
a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

注意：currentColor 让下划线自动继承文字颜色；若需固定色，把 currentColor 换成 #333 等值即可。