CSS实现 Tab hover 下划线跟随

<div class="menu">
<ul>
<li>你好啊</li>
<li>我的名字叫</li>
<li>Pte Lundde</li>
<li>很高兴认识你哦</li>
<li>希望</li>
<li>你能成为我的朋友</li>
</ul>
</div>

.menu ul{
height: 30px;
width: auto;
line-height: 30px;
}
.menu ul li{
position: relative;
float: left;
display: inline-block;
padding:0 30px;
height: 30px;
line-height: 30px;
}
.menu ul li::before{
content:'';
position: absolute;
top:0;
left:100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: all .3s linear;
}
.menu ul li:hover::before{
left:0;
width: 100%
}
.menu ul li:hover ~ li::before{
left:0;
}