按钮下划线悬停效果不能直接用text-decoration：underline，因Font Awesome图标默认display:inline-block会中断下划线；应改用display:inline或伪元素::after配合transform实现可控动画，并注意移动端无hover态。
按钮加下划线悬停效果，不能直接用 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); }
移动端下划线 hover 效果为何不触发
这不是 bug，是规范行为：iOS Safari 和 Android Chrome 默认不模拟 hover 状态，手指点击即 :active，松开就回退，没有“悬停”这个中间态。
立即学习“前端免费学习笔记（深入）”；
- 别把核心功能藏在 hover 下划线下——比如仅靠悬停显示操作说明，移动端用户根本看不到
- 若真需反馈，优先用
:active（点按瞬间变色/缩放），或监听touchstart/touchend手动 toggle 类 - 某些 WebView 在桌面 UA 下会临时触发 hover，但不可靠，不能作为功能依据
- 检查是否误加了
pointer-events: none—— 它会同时禁用 hover 和 click
真正麻烦的不是怎么画那条线，而是判断它该在哪断、要不要动、动多快，以及——它在 iPhone 上根本不会动。做之前先想清楚，这条下划线到底承担的是装饰，还是信息传达的关键路径。
