答案是通过CSS的::after伪元素和transition属性实现链接悬停下划线展开动画，首先设置链接为relative定位，再利用::after创建初始宽度为0的下划线条，结合transition定义动画效果，当:hover触发时宽度变为100%，形成平滑展开的下划线，可调整left、transform等属性实现不同展开方式。
给链接添加悬停动画效果，可以通过
::after
伪元素
和
transition
实现平滑的下划线展开动画。这种方式视觉效果现代，常用于导航菜单或按钮链接中。
基本原理说明
使用 ::after 创建一个隐藏的下划线条，初始宽度为 0。当用户将鼠标悬停在链接上时，通过 CSS 的 transition 属性让下划线平滑地扩展到完整宽度。
实现步骤
设置链接
position: relative
，以便伪元素能相对于它定位
用
::after
添加内容为空的伪元素，定位在文本底部
设置伪元素的初始
width: 0
和背景色
添加
transition
控制宽度变化的动画时长和缓动效果
在
:hover::after
中将宽度设为 100%，触发动画
可选增强效果
你可以调整 transition 的缓动函数，比如用ease-in-out让动画更柔和，或改变下划线颜色、高度、位置（如从中间向两边展开）来实现更多样式：
基本上就这些，不复杂但容易忽略细节。关键是控制好定位和过渡属性，就能做出流畅自然的悬停下划线动画。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
.link::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.link:hover::after {
width: 100%;
}