CSS实现 Tab hover 下划线跟随

html

1
2
3
4
5
6
7
8
9
10
<div class="menu">
   <ul>
     <li>你好啊</li>
     <li>我的名字叫</li>
     <li>Pte Lundde</li>
     <li>很高兴认识你哦</li>
     <li>希望</li>
     <li>你能成为我的朋友</li>
  </ul>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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;
}

效果预览