- CSS
.nav li {
position: relative;
float: left;
font-size: 16px;
line-height: 40px;
padding: 0 22px;
}
.nav li a {
position: relative;
display: block;
color: #897A70;
}
.nav li a:after {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
height: 3px;
background: #9E7245;
content: '';
transition: 0.3s;
}
.nav li:hover a:after {
left: 0;
right: 0;
}
- HTML
<ul class="nav">
<li><a href="/">网站首页</a></li>
<li><a href="/">网站首页</a></li>
</ul>