001. 纯CSS导航栏下划线效果

最新推荐文章于 2024-01-11 21:14:00 发布

转载最新推荐文章于 2024-01-11 21:14:00 发布 · 167 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3563169/blog/1862693

文章标签：

#python

本文介绍了一种使用纯CSS实现的导航栏下划线跟随鼠标指针效果的方法。通过HTML结构定义导航项，并利用CSS伪元素`:before`结合`hover`状态实现下划线动态扩展，以此达到美观且实用的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

如何使用纯CSS制作下图下划线跟随效果？

具体代码如下，使用伪类：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="tab-item">导航一</div>
	<div class="tab-item">导航二</div>
	<div class="tab-item">导航三</div>
	<div class="tab-item">导航四</div>
</body>
<style>
.tab-item{
	width: 100px;
	display: inline-block;
	text-align: center;
	position: relative;
}
.tab-item::before{
	content: " ";
	position: absolute;
	top: 0;
    left: 50%;
	width: 0;
	height: 100%;
	border-bottom: 2px solid #000000;
    transition: 0.2s all linear;
}
.tab-item:hover::before{
	width: 100%;
	left: 0;
}
</style>

</html>

参考文档：《不可思议的纯CSS导航栏下划线跟随效果》

转载于:https://my.oschina.net/u/3563169/blog/1862693