本文介绍了如何通过css实现当鼠标悬停在父元素上时，子元素文本显示下划线动画效果。通过巧妙地利用::before伪元素和transition属性，可以轻松创建平滑过渡的下划线动画，提升用户体验。文章提供了详细的代码示例和解释，帮助开发者快速掌握该技巧。
在网页设计中，常常需要为文本添加一些交互效果，例如鼠标悬停时显示下划线。本文将介绍一种使用CSS实现的文本下划线动画效果，该效果在鼠标悬停于父元素上时触发，而非直接悬停于文本上。
html 结构
首先，我们需要一个包含文本的HTML结构。以下是一个简单的示例：
<div class="newsBox"> <div class="titleBox"> <a class="newsTitle" id="newsTitle">News</a> </div> </div>
在这个结构中，.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属性的值，以改变动画的速度和效果。
- 可以根据需要修改下划线的颜色、高度和位置。
- 该方法适用于各种类型的文本元素，例如链接、标题和段落。
