CSS实现 Tab hover 下划线跟随

html

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

css

.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;
}

效果预览