M-007 Underline Grow Link | Vibe UI Pattern Library

ライブデモ Live Demo

リンクにホバーすると、下線が中央から左右に伸びます。速度と色をカスタムプロパティで調整できます。

On hover, the underline grows from the center. Adjust speed and color via custom properties.

About Works Contact

アニメーション速度 Animation Speed 0.3s

下線の色 Underline Color

AI向け説明 AI Description

`M-007` はリンクの `::after` 擬似要素で下線を描画し、`left: 50%` と `width: 0` から `left: 0` と `width: 100%` へ `transition` で変化させます。中央から左右に伸びる表現は Hover.css などでよく使われるパターンです。

`M-007` draws the underline with a `::after` pseudo-element. A `transition` animates from `left: 50%` and `width: 0` to `left: 0` and `width: 100%`, creating a center-to-sides grow effect common in Hover.css-style patterns.

調整可能パラメータ Adjustable Parameters

--underline-duration — 下線が伸びる時間underline animation duration
--underline-color — 下線の色underline color
--underline-height — 下線の太さunderline thickness

実装 Implementation

HTML + CSS

<a href="#" class="underline-link">Link Text</a>

<style>
:root {
  --underline-duration: 0.3s;
  --underline-color: #5c6ac4;
  --underline-height: 2px;
}

.underline-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.underline-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: var(--underline-height);
  background: var(--underline-color);
  transition: width var(--underline-duration) ease, left var(--underline-duration) ease;
}

.underline-link:hover::after,
.underline-link:focus-visible::after {
  left: 0;
  width: 100%;
}
</style>

React (JSX + CSS)

// react/M-007.jsx
import "./M-007.css";

export default function UnderlineGrowLink({ href, children }) {
  return (
    <a href={href} className="underline-link">
      {children}
    </a>
  );
}

/* react/M-007.css */
.underline-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.underline-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #5c6ac4;
  transition: width 0.3s ease, left 0.3s ease;
}

.underline-link:hover::after,
.underline-link:focus-visible::after {
  left: 0;
  width: 100%;
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: M-007
- パターン名: アンダーライン伸びリンク
- 参照URL: https://devsnips.dev/animations/M-007.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: M-007
- Pattern Name: Underline Grow Link
- Reference URL: https://devsnips.dev/animations/M-007.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

左から右に伸ばす場合は `left: 0` のまま `width` のみ 0→100% に変更します。参考: Hover.css (ianlunn.github.io/Hover/)。

For left-to-right only growth, keep `left: 0` and animate only `width` from 0 to 100%. Reference: Hover.css.