本文将介绍如何使用CSS在鼠标悬停父元素时，为子元素中的文本添加一个动态下划线效果。通过CSS伪元素和过渡属性，我们可以轻松实现这一效果，提升用户体验，使网页更具吸引力。本文提供详细的代码示例和解释，帮助你理解并应用这种技术。
实现原理
核心思路是利用CSS的伪元素 ::before 或 ::after 创建下划线，并将其初始宽度设置为0，隐藏。当鼠标悬停在父元素上时，通过CSS选择器改变伪元素的宽度，使其从0过渡到100%，从而实现动态下划线的效果。
代码实现
以下是一个具体的实现示例，展示了如何在鼠标悬停在 .newsBox 上时，为 .newsTitle 添加下划线动画：
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
CSS 样式：
.newsBox {
padding-top: 5%;
padding-bottom: 5%;
background-color: rgba(154, 54, 67, 0.5);
}
.titleBox {
margin-left: 20px;
}
.newsTitle {
position: relative;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
font-style: italic;
}
.newsTitle::before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: red;
visibility: hidden;
transition: all 0.5s ease-in-out;
}
.newsBox:hover .newsTitle::before {
visibility: visible;
width: 100%;
}代码解释：
- .newsTitle：设置文本的基本样式，position: relative; 是为了让伪元素相对于该元素定位。
- .newsTitle::before：
- .newsBox:hover .newsTitle::before：当鼠标悬停在 .newsBox 上时，.newsTitle 的 ::before 伪元素的 visibility 变为 visible，width 变为 100%，从而显示下划线，并产生动画效果。
自定义悬停区域
如果希望鼠标悬停在 .titleBox 上时触发下划线动画，只需修改 CSS 选择器即可：
.titleBox:hover .newsTitle::before {
visibility: visible;
width: 100%;
}注意事项
- 兼容性： 现代浏览器都支持 CSS 伪元素和过渡属性，但在老旧浏览器上可能存在兼容性问题。可以考虑使用 CSS 前缀或者 JavaScript 来解决兼容性问题。
- 性能： 过多的动画可能会影响页面性能，应避免过度使用。
- 可访问性： 确保动画不会影响页面的可访问性，例如，避免使用过于快速或闪烁的动画。
总结
通过使用 CSS 伪元素和过渡属性，我们可以轻松实现鼠标悬停父元素时文本下划线动画效果。这种方法简单易懂，代码量少，可以有效地提升用户体验。在实际应用中，可以根据具体需求调整动画效果和悬停区域，创造出更具吸引力的网页。
