css鼠标划过文字出现往两边延伸的下划线

最新推荐文章于 2023-12-28 09:22:18 发布

原创最新推荐文章于 2023-12-28 09:22:18 发布 · 899 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css hover下划线延伸

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文详细介绍了一种使用HTML和CSS实现的响应式导航栏设计方法。通过灵活运用div、ul和li元素，并结合CSS的Flexbox布局和伪元素:before，创建了一个具有下划线悬停效果的美观导航菜单。

HTML：

        <div class="nav">
		<ul>
			<li><a href="#">Gravit Designer</a></li>
			<li><a href="#">Gravit Klex</a></li>
		</ul>

	</div>

CSS：

/*导航*/

	.nav{ height: 100%; display: flex; align-items: center; background-color: #f90}

	.nav ul{ flex: 1; list-style: none; align-items: center; justify-content: center; display: flex; font-size: 16px; height: 100%; color: white; }

	.nav li{ position: relative; display: inline-flex; align-items: center; justify-content: center; height: 100%; }

	.nav li a,.nav li a:visited{  color: white;  font-weight: normal;  margin: 20px 15px;  position: relative;  line-height: 40px;}

	.nav li a::before,.nav li a:visited::before{ content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }

	.nav li a:hover::before,.nav li a:visited:hover::before{ visibility: visible; transform: scaleX(1);}

效果：