css实现鼠标悬停文字动态显示下划线的效果,移出下划线消失

记录一下学习笔记:

今天在大佬的视频下学习了,鼠标悬停文字时添加下划线滚动效果,鼠标移出时下划线消失,如图展示:
css实现鼠标悬停文字动态显示下划线的效果,移出下划线消失_第1张图片

实现思路:使用渐变背景作为下划线效果使用,如果需要黑色下划线可以更改渐变颜色。
参考CSS linear-gradient() 函数:https://www.runoob.com/cssref/func-linear-gradient.html

代码即样式如下:

 

展示鼠标移入添加下划线效果,鼠标移出时消失,效果展示。

这样下划线的效果就实现了

你可能感兴趣的:(javascript,css3,前端)