实现鼠标悬停在父元素上时文本下划线动画效果
在网页交互设计中，下划线动画是提升用户体验的经典效果之一。当我们希望鼠标悬停在父元素（如卡片、导航项）时，其内部文本的下划线呈现平滑的动态效果，可通过HTML结构配合CSS过渡与伪元素实现，无需依赖JavaScript。
核心实现思路
实现该效果的核心逻辑分为三步：
为文本容器设置相对定位，作为下划线定位的参考基准
使用伪元素
::after创建下划线，初始状态设置为宽度0且居中隐藏当父元素触发悬停状态时，修改伪元素的宽度属性，配合
transition实现平滑过渡
基础实现示例
以下是最简单的实现代码，父元素为包含文本的div，悬停时下划线从中心向两侧展开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下划线动画示例</title>
<style>
.parent-item {
display: inline-block;
padding: 12px 20px;
font-size: 16px;
color: #333;
cursor: pointer;
position: relative; /* 作为伪元素定位参考 */
}
.parent-item::after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background-color: #165dff;
transition: all 0.3s ease;
transform: translateX(-50%); /* 初始居中 */
}
.parent-item:hover::after {
width: 80%; /* 悬停时下划线宽度 */
left: 10%; /* 调整位置使下划线居中 */
transform: translateX(0);
}
</style>
</head>
<body>
<div class="parent-item">悬停查看下划线动画</div>
</body>
</html>多文本场景适配
如果父元素内部包含多段文本或多个子元素，只需保证伪元素的定位参考是父元素本身，无需修改子元素结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多文本下划线动画</title>
<style>
.card {
width: 300px;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
position: relative;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
.after {
content: "";
position: absolute;
bottom: 8px;
left: 20px;
width: 0;
height: 2px;
background-color: #ff4d4f;
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card:hover::after {
width: calc(100% - 40px); /* 下划线宽度适配父元素内边距 */
}
.card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.card-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="card">
<div class="card-title">卡片标题文本</div>
<="card-desc">这是卡片的描述内容，鼠标悬停在整个卡片上时，底部会出现平滑展开的下划线效果。</div>
</div>
</body>
</html>效果优化建议
可以根据实际需求调整以下属性，获得不同的动画效果：
修改
transition的时长与缓动函数，如transition: width 0.5s ease-in-out实现更缓慢的动画调整伪元素的
height属性改变下划线粗细，background-color修改下划线颜色若需要下划线从左侧展开，可设置初始
left: 0，悬停时width: 100%，无需transform属性添加
will-change: width属性优化动画性能，避免页面重绘卡顿
常见问题说明
实现过程中可能遇到以下问题：
下划线不显示：检查父元素是否设置了
position: relative，伪元素是否添加了content: ""属性动画不生效：确认
transition属性是否添加在伪元素本身，而非父元素的悬停状态中下划线位置偏移：通过
left与transform属性配合调整，确保下划线相对于父元素正确定位
这种实现方式纯CSS完成，兼容性好，支持所有现代浏览器，且性能优于JavaScript实现的同类效果，适合大多数网页交互场景使用。