css實現導航欄下劃線跟隨效果
阿新 • • 發佈：2018-11-06
話不多說先附上程式碼
<style>
ul li {
float: left;
display: block;
list-style: none;
margin-left: 20px;
border-bottom: 2 px black solid;
position: relative;
}
ul li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
ul li:hover::before {
width: 100%;
left: 0;
}
ul li:hover~li::before {
left: 0;
}
</style>
</head>
<body>
<ul>
<li>跟著</li>
<li>導航欄</li>
<li>游標小下劃線跟隨</li>
<li>跟隨走動的下劃線</li>
<li>跟隨走動</li>
</ul>
</body>
萬用字元~的作用是當前元素的下一個元素