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

※当サイトにはプロモーションが含まれています。

リンクにホバーアニメーションを加えることで、クリック率を高める効果があると言われています。

今回は、基本的な「リンクにホバー時に下線がスライドする」アニメーションを作成したので、備忘録として残しておきます。

リンクの下線アニメーションのCSS

リンクに対して下線アニメーションを加えるCSSになります。

なお、ナビゲーションメニューや記事内のリンクなどに適用することを想定しています。

HTML

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

CSS

/* 基本のリンクスタイル */
.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クラスに、position: relativeを追加して、下線のアニメーション位置を調整できるようにしています。

::after擬似要素を使用して、リンクの下に新しい要素（下線）を作成します。この要素がホバー時にアニメーションします。

transform: scaleX(0);により、初期状態で横幅を0に縮小して見えない状態に設定します。

transition: transform 0.3s ease;により、スムーズに下線がスライドして表示されるようにしています。

もし、アニメーションを逆方向（右から左）にしたい場合は、transform-originの設定を変更します。

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

右から左にスライドする

下線が中央から左右に広がるようにするには、transform-originの設定を「center」に変更し、スライドの起点を中央にします。

.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); /* ホバー時に左右に広がる */
}

中央から左右に広がる

transform-origin: center;で、下線が中央から左右に広がるように指定しています。

初期状態のtransform: scaleX(0);で横幅を0にし、ホバー時に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);
}

スライドが波のように戻ってくる

以上です。

コードが記載されている箇所の右上にカーソルを持っていくと、コピーアイコンが表示されます。

もしよかったら、ご活用ください。