方法一:
原理
利用元素向左移動的同時，寬度變長，實作兩邊延伸效果。
* {
margin: 0;
padding: 0;
list-style: none; }
body, html {
width: 100%;
height: 100%; }
ul {
width: 20%;
height: 25px;
margin: 100px auto;
font-size: 0; }
ul > li {
display: inline-block;
width: 25%;
height: 100%;
font-size: 16px;
text-align: center;
cursor: pointer;
position: relative; }
li::before {
display: block;
width: 0%;
background: firebrick;
height: 2px;
content: "";
position: absolute;
top: 21px;
left: 50%;
transition: all 0.5s; }
ul li:hover::before {
left: 25%;
width: 50%; }
- 我是一
- 我是二
- 我是三
- 我是四
方法二:
原理:利用scale(0)将下劃線隐藏
li:hover::after{
transform-origin:center;
transform:scale(1);
}
li:after{
position: relative;
content:'';
display: block;
height:1px;
width:100%;
background:green;
top: 5px;
left: 0;
transform:scale(0);
transition:all 0.5s;
}
- 我是一
- 我是二
- 我是三