css -- 链接悬停动画效果(从左到右)


绿兮衣兮,绿衣黄里。心之忧矣,曷维其已


效果

当鼠标悬停时,下划线从左往右延伸


css 样式

/*链接效果*/
a {
    color: #61BFC1;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;
    text-decoration: none;
    vertical-align: baseline;
    position:relative;
}


a:hover {
    text-decoration: none;
}

a::after{
    content:'';
    display:block;
    /*开始时候下划线的宽度为0*/
    width:0;
    height:1px;
    position:absolute;
    left:0;
    bottom:-1px;
    background:#61BFC1;
    /*这里我们设定所有改变都有动画效果,可以自己指定样式才有动画效果*/
    transition:all 0.3s ease-in-out;
}

a:hover::after{
    width:100%;
}