实现鼠标悬浮链接底部出现横线
分类：实例代码
鼠标悬浮链接底部出现横线属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了鼠标悬浮链接，链接底部会出现横线。
横线的出现具有动画效果，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.nav ul li{
float:left;
text-align:center;
height:80px;
line-height:80px;
margin:0 10px;
}
.nav ul li a{
display:block;
font-size:16px;
height:80px;
border-bottom:2px solid transparent;
padding:0 25px;
position:relative;
}
.nav ul li a::after {
border-bottom:2px solid #f58220;
right:0;
content:"";
position: absolute;
left: 0;
opacity: 0;
transform:scaleX(0);
transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);
top:78px;
}
.nav ul li:hover a::after,.nav ul li.cur a::after{
opacity:1;
transform:scaleX(1);
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="">犀牛前端部落一</a></li>
<li><a href="">犀牛前端部落二</a></li>
<li><a href="">犀牛前端部落三</a></li>
</ul>
</nav>
</body>
</html>
鼠标悬浮链接底部出现横线，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮链接底部出现横线就介绍到这了。