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

效果预览