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

相關標籤/搜索