アンダーラインのフェードアニメーション

<p>
	<a href="#" class="c-link">テキスト</a>
</p>
<p>
	<a href="#" class="c-link">テキストテキスト<br>テキスト</a>
</p>
<p>
	<a href="#" class="c-link">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</a>
</p>
Copy

.c-link {
    position: relative;
    display: inline-block;
    color: #223a70;
    text-decoration: none;
    transition: color .3s;

    &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #007bbb;
        opacity: 0;
        transition: bottom .3s, opacity .3s;
        pointer-events: none;
    }

    &:hover {
        color: #007bbb;

        &::after {
            bottom: -9px;
            opacity: 1;
        }
    }
}
Copy

.c-link {
    position: relative;
    display: inline-block;
    color: #223a70;
    text-decoration: none;
    -webkit-transition: color .3s;
    transition: color .3s;
}

.c-link::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #007bbb;
    content: '';
    opacity: 0;
    -webkit-transition: bottom .3s, opacity .3s;
    transition: bottom .3s, opacity .3s;
    pointer-events: none;
}

.c-link:hover {
    color: #007bbb;
}

.c-link:hover::after {
    bottom: -9px;
    opacity: 1;
}
Copy