1. CSS 链接悬停下划线的核心原理
1.1 使用 ::after 的定位策略
在前端开发中，链接悬停下划线动画是提升交互的常见手法。传统的 text-decoration: underline 会直接改变文本的布局与颜色继承，而使用 ::after 伪元素可以在文本下方创建一个独立的下划线层，不改变文本的行高，也不会干扰文本本身的渲染。
通过为父元素设定 position: relative，并让伪元素使用 position: absolute，下划线就成为文本的一个独立层。这样可以实现更精准的对齐和动画控制，同时方便后续扩展，比如调整下划线的位置、厚度和颜色。
1.2 过渡动画的作用
动画的核心在于使用 transition 将下划线的可见性从初始状态平滑过渡到目标状态。将伪元素的初始状态设为不可见（如 transform: scaleX(0) 或 width: 0），悬停或聚焦时再让它变为可见（如 transform: scaleX(1)）。
通过这种方式，用户在互动时会看到一个自然的滑动效果，而不是突然的出现。transition 的时长、缓动函数与起点都可以单独调节，以实现不同风格的下划线动画。
2. 最小可用实现：HTML 与 CSS
2.1 HTML 结构要点
实现此效果的第一步是给链接添加一个明确的类名，方便在 CSS 中统一选择。典型的做法是使用 class="underline-link" 这样的标记。通过这种方式，页面中多个链接可以复用同一个样式，保持一致的交互体验。
如果需要在页面中应用多种风格，可以为不同的链接添加不同的类名，如 underline-link、underline-link--grad 等，以便于区分不同的动画效果。通过语义清晰的类名，也有利于搜索引擎抓取与排序。
2.2 CSS 样式要点
核心思路是先去掉原有下划线，然后通过 ::after 伪元素来绘制可控的下划线。要点包括定位、尺寸、颜色和过渡属性的设置。
常用的实现要点有：position、left、bottom、width、height、transform、transition。这些属性共同决定了下划线的初始状态以及悬停时的动画效果。
<a href="#" class="underline-link">示例链接</a>.underline-link {position: relative;text-decoration: none;color: #0d6efd;
}
.underline-link::after {content: '';position: absolute;left: 0;bottom: -2px;width: 100%;height: 2px;background: currentColor;transform: scaleX(0);transform-origin: left;transition: transform 0.25s ease;
}
.underline-link:hover::after,
.underline-link:focus::after {transform: scaleX(1);
}
3. 进阶效果：多种下划线动画风格
3.1 渐变色下划线
如果希望下划线随颜色呈现渐变效果，可以在 ::after 中使用 linear-gradient，并保持相同的定位与过渡逻辑。颜色随文本颜色变化而自动跟随，提升整体美观度。
渐变下划线的实现要点仍然是将伪元素放在文本下方，并通过 transform 或 width 的变化来实现显隐。渐变背景通常通过 background 或 background-image 来实现。
.underline-link.gradient::after {content: '';position: absolute;left: 0;bottom: -2px;height: 2px;width: 100%;background: linear-gradient(90deg, #f06, #4c6ef5);transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease;
}
.underline-link.gradient:hover::after { transform: scaleX(1); }
3.2 其他变体：厚度、宽度与进入方式
除了基础的线性渐变，还可以通过改变下划线的厚度、宽度或进入方式来创造多样的视觉效果。常见做法包括：增厚下划线、采用 width 变化 而非 scaleX、以及在不同的类名下应用不同的过渡时长。
通过组合不同的类名，可以在同一页面实现多种风格的链接悬停下划线动画，提升用户界面的灵活性和可定制性。
.underline-link-thick::after {content: '';position: absolute;left: 0;bottom: -2px;height: 3px;width: 0;background: currentColor;transition: width 0.25s ease;
}
.underline-link-thick:hover::after { width: 100%; }
4. 无障碍性与兼容性要点
4.1 键盘导航与焦点状态
为了确保无障碍性，除了 :hover 外，还应覆盖 :focus 和 :focus-visible 状态。键盘导航的用户应能通过聚焦来看到下划线动画，因此在 CSS 中同时定义 :focus::after 的变换效果非常重要。
同时，建议为聚焦状态保留明显的轮廓或替代强调，例如使用 outline、颜色对比度更高的焦点样式，以便屏幕阅读器用户和色觉受限的用户也能获取清晰的交互反馈。
.underline-link:focus-visible::after {transform: scaleX(1);
}
.underline-link:focus {outline: 2px solid #0d6efd;outline-offset: 2px;
}
4.2 兼容性与性能注意事项
在现代浏览器中，::after、transform 与 transition 的基础用法都得到广泛支持，但在极旧版本的浏览器中可能需要兜底方案。因此，在关键应用中可考虑提供一个简化的下划线效果作为回退。
同时，为了确保性能，尽量避免在大量文本上逐字应用复杂动画，优先对需要互动的链接进行特定样式的应用；并保证伪元素的尺寸和定位设置准确，以减少布局重排的成本。
