设置下划线样式

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
31
32
33
<!--主要代码:-->
<style>
div{width: 200px;margin: 100px auto;}
span{
display: block;
position: relative;
font-size: 20px;
transition: all 250ms ease;
margin: 20px;
cursor: pointer;
}
span:hover{
color: orangered;
}
span:after{
content: "";
width: 140px;
height: 2px;
background: #4d90c4;
position: absolute;
bottom: -3px;
left: 0px;
transform-origin: center center;/*设置元素基点位置*/
transform: scaleX(0); /*设置元素X轴缩放*/
transition: all 250ms ease; /*缓慢变化*/
}
span:hover:after{ /*hover之后再使元素X轴放大1倍*/
transform: scaleX(1)
}
</style>
<div>
<span>鼠标移动到这里</span>
</div>
  • :hover
  • 在鼠标放到设置该元素的上面时发生变化,尝试一下
  • :after
  • 顾名思义,在某元素的后面添加内容,包括文字、颜色、图片,尝试一下
  • 当然,与之对应的是:before 查看
    1
    2
    3
    4
    5
    6
    7
    div:after
    {
    content:"后面添加的内容";
    background:url('路径');
    color:red;
    font-weight:bold;
    }