<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css实现导航栏下划线向两边展开效果</title>
<style>
ul {
height: 80px;
line-height: 80px;
top: -30px;
list-style: none;
margin: 0 auto;
width: 380px;
}
ul>li {
float: left;
height: 80px;
font-size: 14px;
margin-right: 30px;
position: relative;
padding: 0 5px;
}
ul>li::before,
ul>li::after {
content: '';
width: 0;
height: 2px;
background-color: #0f0f0f;
position: absolute;
top: 99%;
left: 50%;
transition: all 0.8s;
}
ul>li:hover::before {
width: 50%;
left: 0px;
}
ul>li:hover::after {
width: 50%;
right: 0px;
}
</style>
</head>
<body>
<ul>
<li>手机</li>
<li>电脑</li>
<li>平板</li>
<li>智慧屏</li>
<li>穿戴</li>
</ul>
</body>
</html>