本文介绍了如何通过CSS实现当鼠标悬停在父元素上时，子元素文本显示下划线动画效果。通过巧妙地利用::before伪元素和transition属性，可以轻松创建平滑过渡的下划线动画，提升用户体验。文章提供了详细的代码示例和解释，帮助开发者快速掌握该技巧。
在网页设计中，常常需要为文本添加一些交互效果，例如鼠标悬停时显示下划线。本文将介绍一种使用CSS实现的文本下划线动画效果，该效果在鼠标悬停于父元素上时触发，而非直接悬停于文本上。
HTML 结构
首先，我们需要一个包含文本的HTML结构。以下是一个简单的示例：
在这个结构中，.newsBox是父元素，.titleBox是中间层，.newsTitle是包含文本的链接元素。我们的目标是当鼠标悬停在.newsBox或.titleBox上时，News文本下方出现下划线动画。
CSS 样式
接下来，我们使用CSS来创建下划线动画。关键在于使用::before伪元素，并利用transition属性实现动画效果。
.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;
}这段CSS代码首先定义了.newsTitle的样式，并使用position: relative使其成为定位上下文。然后，.newsTitle::before伪元素被创建为一个高度为2px的红色条，初始宽度为0，并隐藏。transition: all 0.5s ease-in-out定义了所有属性变化的过渡效果，使动画更加平滑。
实现悬停效果
要实现鼠标悬停在父元素上时触发下划线动画，我们需要修改CSS选择器。如果希望悬停在.newsBox上时触发动画，可以使用以下代码：
.newsBox:hover .newsTitle::before {
visibility: visible;
width: 100%;
}这段代码表示，当鼠标悬停在.newsBox上时，.newsTitle::before的visibility变为visible，width变为100%，从而显示下划线动画。
类似地，如果希望悬停在.titleBox上时触发动画，可以使用以下代码：
.titleBox:hover .newsTitle::before {
visibility: visible;
width: 100%;
}总结
通过使用::before伪元素和transition属性，我们可以轻松实现文本下划线动画效果。关键在于正确选择CSS选择器，以确保动画在正确的元素上触发。这种方法不仅简单易用，而且可以灵活地应用于各种网页设计场景，提升用户体验。
注意事项：
- 确保父元素有足够的空间来显示下划线。
- 可以根据需要调整transition属性的值，以改变动画的速度和效果。
- 可以根据需要修改下划线的颜色、高度和位置。
- 该方法适用于各种类型的文本元素，例如链接、标题和段落。
