グローバルナビに最適！リンクの下線アニメーションのCSS

<a href="#" class="underline-animation">リンクにホバーしてみてください</a>

/* 基本のリンクスタイル */
.underline-animation {
color: #333;
text-decoration: none;
position: relative; /* 下線の位置を制御するためにrelativeを設定 */
font-weight: bold;
}

/* 下線アニメーション */
.underline-animation::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; /* 下線の位置 */
width: 100%;
height: 2px; /* 下線の高さ */
background-color: #007bff; /* 下線の色 */
transform: scaleX(0); /* 最初は見えないように縮小 */
transition: transform 0.3s ease; /* アニメーションの速度と動き */
transform-origin: bottom right; /* 下線のアニメーション起点を設定 */
}

.underline-animation:hover::after {
transform: scaleX(1); /* ホバー時に下線が全幅に広がる */
transform-origin: bottom left; /* 左から右に広がるように設定 */
}

.underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom right; /* 右から左に広がる */
}

.underline-animation::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #007bff;
transform: scaleX(0); /* 最初は中央に縮小 */
transition: transform 0.3s ease;
transform-origin: center; /* 中央から左右に広がる */
}

.underline-animation:hover::after {
transform: scaleX(1); /* ホバー時に左右に広がる */
}

@keyframes wave {
0% { transform: scaleX(0); }
50% { transform: scaleX(1.2); }
100% { transform: scaleX(1); }
}

.underline-animation::after {
/* 他のスタイルはそのまま */
animation: wave 0.6s ease;
transform: scaleX(1);
}