使用CSS简单定义超链接下划线效果

以前看到CSS就头疼。折腾自己的博客只好硬着头皮干CSS，原来chrome(ium)自带的CSS调试还是挺方便的... 然后照抄了一个超链接下划线效果，效果如上。

/* 来源: https://jiubx.com/5057.html */
/* 颜色记得自己改改 */
.fancy-link {
    text-decoration: none; /* 去掉原有下划线 */
    background-image: linear-gradient(to right, #69f, #6df); /* 从左到右的渐变色 */
    background-repeat: no-repeat;
    background-position: bottom left; /* 背景靠左下对齐 */
    background-size: 0 3px; /* 设置背景高度为3px，宽度为0 */
    transition: background-size 300ms ease-in-out; /* 设置动画效果 */
}

.fancy-link:hover {
    background-size: 100% 3px; /* 设置宽度为100% */
    color: #59f; /* 更改文本颜色 */
}

Update on 21/10/1 : 写了每行样式的注释，然后改了错误的地方。