HTML怎么做鼠标悬停下划线_html鼠标hover下划线动画效果【技巧】-html教程-PHP中文网

text-decoration 无法实现平滑下划线动画，因其过渡支持差且无法控制样式与位置；推荐用 ::after 伪元素配合 transform 和 transition 模拟，或用 border-bottom + padding-bottom 快速实现基础效果。

html怎么做鼠标悬停下划线_html鼠标hover下划线动画效果【技巧】

直接用 text-decoration 配合 transition 做不了平滑下划线动画——浏览器对 text-decoration 的过渡支持极差，多数情况下会直接跳变或完全不生效。

为什么 `text-decoration: underline` hover 动画会失效

Chrome、Firefox 对 text-decoration 的 transition 几乎不响应；Safari 虽部分支持，但无法控制下划线颜色、粗细、位置等细节。更关键的是：text-decoration 生成的下划线始终贴在字体基线，无法实现“从左到右滑入”“居中上浮”等设计需求。

用 `background-image` 模拟下划线（推荐）

本质是给文字加一层背景色条，通过 background-size 和 background-position 控制显示范围，再用 transition 动画它：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

a {
  position: relative;
  color: #333;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
a:hover::after {
  transform: scaleX(1);
}

::after 伪元素必须设 content: ''，否则不渲染
transform: scaleX(0) 初始隐藏，scaleX(1) 展开，比改 width 更性能友好
若要“从左滑入”，把 transform-origin 设为 left center；若要“居中生长”，设为 center center
注意父级 a 必须有 position: relative，否则 ::after 会相对 body 定位

用 `border-bottom` + `padding-bottom` 的简版方案

适合快速实现、兼容性要求高（IE11+）的场景，但无法做“滑入”效果，只能淡入/缩放：

a {
  color: #333;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.2s;
}
a:hover {
  border-bottom-color: #007bff;
}