How to create a underline grow link アンダーライン伸びリンクの作り方
Link with underline that grows from the center on hover. Hover.css-style pattern. ホバー時に下線が中央から左右に伸びるリンクスタイル。Hover.css 系のパターン。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Link with underline that grows from the center on hover. Hover.css-style pattern.
ホバー時に下線が中央から左右に伸びるリンクスタイル。Hover.css 系のパターン。
どこで使うかWhere to use
hero section, micro interaction, visual feedback, brand expression
ナビゲーションリンク、見出しアクセント、カードタイトル、フッターリンク
特徴Key features
Pure CSS underline that grows from left to right on hover using transform: scaleX. No JavaScript. Works with inline links, nav items, and headings. The transform-origin controls the direction of growth.
ホバー時にtransform:scaleXで左から右へ伸びる純粋なCSSアンダーライン。JavaScript不要。インラインリンク・ナビアイテム・見出しに対応。transform-originで伸びる方向を制御。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--underline-duration | — | underline animation duration |
--underline-color | — | underline color |
--underline-height | — | underline thickness |
実装コード Implementation Code
<a href="#" class="underline-link">Link Text</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%;
}import "./M-007.css";
export default function UnderlineGrowLink({ href, children }) {
return (
<a href={href} className="underline-link">
{children}
</a>
);
}.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%;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
A ::after pseudo-element is positioned absolutely below the link text with width: 100% and height: 2px (or custom). Its transform: scaleX(0) collapses it invisibly on the x-axis. On :hover, scaleX transitions to 1, revealing the underline from the transform-origin point (default: left).
::after疑似要素をリンクテキスト下に絶対配置（width:100%、height:2px）。transform:scaleX(0)でx軸方向に非表示に折りたたむ。:hoverでscaleXが1にトランジションし、transform-origin（デフォルト：left）の点からアンダーラインが現れます。
カスタマイズ方法Customization
Set transform-origin: center for a symmetrical grow-from-center effect. Change transform-origin: right to make it shrink from right on hover-out. Adjust the height for a bold underline or top: -2px for an overline. Add a color gradient to the background for a chromatic underline.
transform-origin:centerで中央から対称に伸びるエフェクト。transform-origin:rightでホバーアウト時に右から縮む効果。heightを増やして太いアンダーラインや、top:-2pxでオーバーラインに変更。backgroundにグラデーションを追加してクロマティックなアンダーラインに。
注意点Caveats
Ensure the parent element has position: relative for absolute pseudo-element positioning to work correctly. The effect is purely decorative; do not rely on it alone to convey link state to screen reader users.
親要素にposition:relativeを設定して疑似要素の絶対配置が正しく機能するようにしてください。このエフェクトは純粋に装飾的なものです。スクリーンリーダーユーザーへのリンク状態の伝達はこれだけに頼らないでください。
よくある質問 Frequently Asked Questions
How to customize the underline grow link? Underline Grow Linkをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the underline grow link in React? ReactでUnderline Grow Linkを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of underline grow link? Underline Grow Linkのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.