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

时间 2019-12-05

标签 css 导航下划线效果栏目 CSS 繁體版

原文原文链接

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

具体代码以下，使用伪类：post

<!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导航栏下划线跟随效果》code