Underline Slide Hover

CODE

HTML

<div class="demo-stage ush-stage"><a class="ush-link">Hover this link</a></div>

CSS

.ush-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.ush-link { position:relative; color:#fff; font-family:'Oswald',sans-serif; font-size:1.4rem; letter-spacing:.05em; text-decoration:none; cursor:pointer; padding-bottom:6px; }
.ush-link::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#E91B89; transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.7,0,.2,1); }
.ush-link:hover::after { transform:scaleX(1); transform-origin:left; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .ush-link::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

ホバーで下線が左から伸び、離れると右へ抜けるリンク装飾をCSSだけで作って。::after に width:100%; height:2px の下線を置き、初期 transform:scaleX(0); transform-origin:right。:hover で scaleX(1); transform-origin:left。origin を hover時=left / 通常=right にするのがポイント（入りは左から伸び、抜けは右へ消える）。ナビ・記事リンクのマイクロインタラクションに。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

アンダーラインスライドホバー（Underline Slide Hover）とは

ホバーで下線が左から伸び、離れると右へ抜けるリンク装飾。ナビ・記事リンクの上質なマイクロインタラクション。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ナビゲーション・リンク・サムネイル・カードなど、マウスを乗せた要素のフィードバックに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

アンダーラインスライドホバー（Underline Slide Hover）はどんな効果ですか？

ホバーで下線が左から伸び、離れると右へ抜けるリンク装飾。ナビ・記事リンクの上質なマイクロインタラクション。ナビゲーション・リンク・サムネイル・カードなど、マウスを乗せた要素のフィードバックに向く演出です。

Underline Slide HoverはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

アンダーラインスライドホバー（Underline Slide Hover）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ