underline-css

/* 黄色 */
.underline1 {
    color: #333;
    text-decoration: none;
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.1s;
}

/* 青色 */
.underline2 {
    color: #333;
    text-decoration: none;
    background: linear-gradient(transparent 50%, rgba(107, 182, 255, .24) 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.1s;
}

/* 緑色 */
.underline3 {
    color: #333;
    text-decoration: none;
    background: linear-gradient(transparent 50%, rgba(151, 232, 154, .69) 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.1s;
}