利用css实现鼠标经过元素，下划线由中间向两边展开

最新推荐文章于 2024-04-10 09:16:02 发布

原创最新推荐文章于 2024-04-10 09:16:02 发布 · 454 阅读

1 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

24 篇文章

订阅专栏

一些demo

19 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的鼠标悬停下划线动画效果，通过`:hover`伪类和`transition`属性，使下划线在鼠标移入时平滑地从中间向两边扩展，为网站导航或按钮元素增添互动感。

实现效果：
在这里插入图片描述
样式代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
	<style type="text/css">
		#underline{
		    width: 200px;
		    height: 50px;
		    background: #ddd;
		    margin: 20px;
		    position: relative;
		}
		
		#underline:after{
		    content: "";
		    width: 0;
		    height: 1px;
		    background: blue;
		    position: absolute;
		    top: 100%;
		    left: 50%;
		    transition: all .8s;
		}
		
		#underline:hover:after{
		   left: 0%;
		   width: 100%;
		}
	</style>
</head>
<body>
	<div id="underline"></div>
</body>
</html>