リンク用アニメーション下線ジェネレーター（CSS）

リンク用アニメーション下線ジェネレーター（CSS）: 用途

マウスを乗せるとアニメーションする下線は、メニューや文章中のリンクの仕上げになります。::afterで作ると1行のリンクでしか動作しませんが、このジェネレーターはbackground-imageで線を描き、background-sizeをアニメーションさせるため、リンクが折り返しても動作します。

5つの効果（左から伸びる、中央から伸びる、スライド、蛍光ペン、波線）、色、太さ、長さを選べます。WCAG 1.4.1が求めるように、リンクが本文と区別できるよう、初期設定では細い線が常に表示され、効果はキーボードのフォーカス時にも表示されます。

使い方

1. 効果を選びます。
2. 色、太さ、長さを調整します。
3. CSSをコピーして、リンクにクラスを付けます。

使うタイミング

• ナビゲーションメニュー。
• 記事内のリンク。
• フッターやリンク集。

よくある質問

なぜ::afterではなくbackgroundを使うのですか？

疑似要素::afterでは、線が1行のリンクでしか機能しません。background-imageで下線を描き、background-sizeをアニメーションさせると、リンクが2行に折り返しても線がテキストに沿います。

リンクはリンクに見えますか？

段落の途中では、マウスを乗せなくてもリンクが本文と区別できなければなりません（WCAG 1.4.1）。そのため、細い線を常に表示するオプションがオンになっており、効果はその上でアニメーションします。

スマートフォンではどうなりますか？

スマートフォンにはマウスオーバーがないため、フォーカス時とタップ時に効果が表示されます。常に見える基本の線により、リンクとして認識されます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール