前言

觉得原来的超链接样式不是很符合我的审美，所以就改了一下，本文章用于记录防止遗忘咋写的

HTML

1
<a href="#">我是超链接</a>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置居中 */
}

a {
    /* 清除超链接样式 */
    text-decoration: none;
    /* 更改初始颜色 */
    color: #000;
    /* 设置过渡动画 */
    transition: all .3s;
    /* 设置相对定位 */
    position: relative;
}

a::before {
    /* 设置一个填充让伪元素正常渲染 */
    content: ' ';
    /* 设置绝对定位 */
    position: absolute;
    /* 设置底部距离 */
    bottom: -3px;
    /* 设置宽度 */
    width: 100%;
    /* 设置高度 */
    height: 2px;
    /* 设置过渡动画 */
    transition: all .3s;
    /* 设置水平方向缩放比例 */
    transform: scaleX(0);
    /* 设置背景 */
    background: rgb(255, 133, 153);
}

a:hover {
    /* 设置鼠标接触时颜色 */
    color: rgb(255, 133, 153);
}

a:hover::before {
    /* 设置比例为1，使其显示 */
    transform: scaleX(1);
}