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

关注

原创最新推荐文章于 2026-02-06 11:05:23 发布 470 阅读 AI 写同款· GEO 优化 ›

纯CSS导航栏下划线跟随效果导航栏下划线跟随效果这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？定义需求我们定义一下简单的规则，要求如下：假设 HTML 结构如下： <ul> <li>不可思议的CSS</li> <li>导航栏&... 阅读详情

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

<!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>