# 快速导航
# css 实现鼠标经过元素下划线由中间向两侧展开
下划线由中间向两侧展开
点击即可查看代码
html 结构代码
<div class="underline">下划线由中间向两侧展开</div>
1
css 代码
.underline {
width: 200px;
height: 50px;
background: #eee;
margin: 10px auto;
text-align: center;
line-height: 50px;
position: relative; // 相对定位
cursor: pointer;
}
.underline::after {
// 伪元素
content: '';
width: 0; // 宽度为0
height: 2px; // 高度为2px
background: #42b983;
position: absolute; // 绝对定位
top: 100%; // 距离顶部top1-100%
left: 50%; // 距离左边的距离50%
transition: all 0.8s; // 平缓过渡
}
.underline:hover:after {
// 添加伪类,鼠标经过underline元素时,after的宽度发生改变
left: 0%;
width: 100%; // 改变的宽度100%
transition: all 0.8s;
}
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
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
# css 实现鼠标经过元素下划线由左向右展开
下划线由左向右展开
点击即可查看代码
.underline {
width: 200px;
height: 50px;
background: #eee;
margin: 10px auto;
text-align: center;
line-height: 50px;
position: relative; // 相对定位
cursor: pointer;
}
.underline::after {
// 伪元素
content: '';
width: 0;
height: 2px;
background: #42b983;
position: absolute;
top: 100%;
left: 0%; //距离左边0px,由左向右展出
transition: all 0.8s;
}
.underline:hover:after {
// 添加伪类,鼠标经过underline元素时,after的宽度发生改变
left: 0%;
width: 100%;
transition: all 0.8s;
}
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
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
# css 实现鼠标经过元素下垂直方向由中间向两侧展开
垂直方向上由中间向两侧展开
点击即可查看代码
.underline {
width: 210px;
height: 50px;
background: #eee;
margin: 10px auto;
text-align: center;
line-height: 50px;
position: relative;
cursor: pointer;
}
.underline::after {
content: '';
width: 2px; // 宽度为2px
height: 0; // 高度为0
background: #42b983;
position: absolute;
top: 50%; // 起始位置距离顶部是50%
left: 0%; // 左边的距离为0px
transition: all 0.8s;
}
.underline:hover:after {
// 伪元素 :after 还可以配合伪类使用
top: 0%; // 鼠标滑过后,距离定位的位置是0%
height: 100%; // 高度变为100%,这里填写父元素的具体高度也是可以的
transition: all 0.8s; // 过度
}
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
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
# 分析
根据示例效果,下划线动态变化是宽度,或者高度,给鼠标要经过的元素添加一个伪元素,然后在给当前元素添加一个伪类hover效果,改变width,height即可实现
只要能实现其中一个,其他的类似
注意
给经过的元素添加伪元素时,设置绝对定位,在初始位置时,需要设置top,left的值,在鼠标经过元素hover时,改变top的值可以决定滑过的方向
← css 展示各种手型 表单输入框聚焦效果 →
