HTML按钮悬停下划线效果教程-html教程-PHP中文网

按钮下划线悬停效果不能直接用text-decoration：underline，因font awesome图标默认display:inline-block会中断下划线；应改用display:inline或伪元素::after配合transform实现可控动画，并注意移动端无hover态。

html按钮悬停下划线效果教程

按钮加下划线悬停效果，不能直接用 text-decoration: underline 一劳永逸——尤其当按钮里含 Font Awesome 图标时，下划线默认只画到文字末尾，图标被“漏掉”，视觉断裂。

button:hover + text-decoration 失效或不覆盖图标怎么办

根本原因是：Font Awesome 图标（如 <i class="fa fa-arrow-right"></i>）在 FA 4.x 中默认是 display: inline-block，而 text-decoration 只作用于纯内联流内容；inline-block 元素会中断装饰线的连续渲染。

临时修复：给图标加 button .fa { display: inline; }，让其回归文本流，下划线自然延伸过去
注意作用域：别写全局 .fa { display: inline }，否则可能破坏其他位置图标的布局（比如单独放在段落里的图标）
FA 5+/6+ 用户需确认类名：FA 5 用 fas、FA 6 用 fa-solid，选择器要同步改成 button .fas 或 button .fa-solid
若按钮结构复杂（如图标+文字+图标），display: inline 可能导致对齐错乱，此时应改用 display: flex + align-items: center 统一控制，再用伪元素画下划线（见下一条）

用 ::after 伪元素实现可控下划线动画

想让下划线从左滑入、长度刚好贴合文字+图标宽度，或者避免 text-decoration 的兼容性波动，就得绕过它，用 ::after 自绘。

Article To Html

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

下载

关键点：伪元素必须设 content: ""、position: absolute、bottom: 0，并继承父按钮的 width 或用 left/right 定位
平滑展开靠 transform: scaleX(0) → scaleX(1)，比直接改 width 更高性能（触发 GPU 加速）
务必把 transition 写在非 hover 状态上：button::after { transition: transform 0.2s ease; }，否则首次悬停没动画

示例片段：

button { position: relative; }<br>button::after {<br>  content: "";<br>  position: absolute;<br>  bottom: -2px;<br>  left: 0;<br>  width: 100%;<br>  height: 2px;<br>  background: currentColor;<br>  transform: scaleX(0);<br>  transform-origin: left;<br>  transition: transform 0.2s ease;<br>}<br>button:hover::after { transform: scaleX(1); }