css实现鼠标悬停文字动态显示下划线的效果，移出下划线消失
要实现鼠标悬停时文字动态显示下划线效果，移出时下划线消失，可以使用CSS的伪类:hover来实现。以下是实现这个效果的CSS代码示例：
.text-underline {
position: relative;
display: inline-block;
}
.text-underline::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px; /* 下划线的厚度 */
background-color: black; /* 下划线的颜色 */
transition: opacity 0.3s ease; /* 下划线的淡入淡出动画 */
opacity: 0; /* 默认下划线不可见 */
}
.text-underline:hover::after {
opacity: 1; /* 鼠标悬停时下划线可见 */
}接下来是HTML代码：
<div class="text-underline">鼠标悬停查看下划线效果</div>将上述CSS类应用到你的文本元素上，鼠标悬停时会显示下划线，移出时下划线会淡出。
评论已关闭