Font Awesome 图标默认为 inline-block，导致 text-decoration: underline 无法作用于图标；通过将其显式设为 display: inline，即可使下划线连续贯穿文字与图标。
font awesome 图标默认为 `inline-block`，导致 `text-decoration: underline` 无法作用于图标；通过将其显式设为 `display: inline`，即可使下划线连续贯穿文字与图标。
在构建交互式 UI 时，按钮的悬停效果（如文字下划线）是提升用户体验的常用手段。但当按钮内同时包含普通文本和 Font Awesome 图标（如 ）时，开发者常遇到一个典型问题：:hover 下的 text-decoration: underline 仅作用于纯文本，图标却“悬浮”于下划线之上，视觉上断裂、不连贯。
根本原因在于 Font Awesome 的 CSS 默认将 .fa 元素设为 display: inline-block —— 而 text-decoration 仅对 inline 级元素（及其内部行内内容）产生连续装饰效果；inline-block 元素则被视为独立盒模型，其边界会中断装饰线。
✅ 解决方案非常简洁：强制图标回归 inline 显示模式：
button {
color: #333;
background: #eee;
border: none;
padding: 2px 10px;
font-size: 1rem;
cursor: pointer;
font-weight: 500;
}
/* 关键修复：使 Font Awesome 图标参与 text-decoration 渲染 */
button .fa {
display: inline;
}
button:hover {
text-decoration: underline;
color: black;
}
? 注意事项：
- 此方案兼容 Font Awesome 4.x（如示例中的 4.7.0），若使用 FA 5+ 或 6+，请确认图标类名（如 fas, far, fa-solid）并相应调整选择器（例如 button i.fa 或 button .fa-solid）；
- 避免全局重置 .fa { display: inline }，应限定作用域（如 button .fa），防止影响其他上下文中的图标布局；
- 若按钮内含多图标或复杂结构，建议统一用 flex 布局替代纯文本流，但本场景中 display: inline 是最轻量、语义清晰的解法。
最终效果：悬停时，下划线将平滑延伸至图标右侧边缘，实现文字与图标的视觉一体化强调，符合现代 UI 的一致性设计原则。
