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

最新推荐文章于 2023-12-05 09:32:36 发布

weixin_33736048

最新推荐文章于 2023-12-05 09:32:36 发布

阅读量121

点赞数

文章标签： python

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

版权

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