<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航栏下划线跟随鼠标</title>
<style>
ul{
list-style: none;
font-size: 0;
}
li{
position: relative;
display: inline-block;
padding: 1rem;
cursor: pointer;
font-size: 16px;
}
li::after{
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
left: 100%;
border-bottom: 1px solid black;
transition: 0.3s ease;
}
li:hover::after{
width: 100%;
left: 0;
}
li:hover~li::after {
left: 0;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javasvript</li>
<li>vue</li>
<li>react</li>
</ul>
</body>
</html>导航栏下划线跟随鼠标
猜你喜欢
转载自blog.csdn.net/Dj_Fairy/article/details/83657882
今日推荐
周排行