テキストを際立たせる「アンダーライン（装飾線）」。 実は、この細部の動きにこだわるだけで、サイト全体の洗練さがグッと増すことをご存知でしょうか。
この記事では、CSSだけで実装できる美しいアンダーラインのアニメーションを5つ厳選しました。 表示中もさりげなく線が動き、ホバーでスタイリッシュに変化します。SWELLにコピペするだけで、シンプルかつプロフェッショナルな装飾を簡単に追加できます。
Elegant Drawing Line（エレガント・ドローイング）
細い線が左から右へ、静かに引かれたり消えたりを繰り返す、非常にエレガントでミニマルな装飾です。マウスを乗せると、線が一気にスッと100%の幅まで伸びて完成します。
See the Pen Elegant Drawing Line by BaseKENT (@basekent) on CodePen.
調整方法
- 線の太さ:
height: 1px;を2pxにすると、少し力強い印象になります。 - 待機中の長さ:
@keyframes drawIdleのscaleXの数値を調整すると、線がうろうろする範囲を変えられます。
Center Expansion（センター・エクスパンション）
中央から左右に向かって、線が静かに呼吸するように伸縮し続けます。ホバーすると、線が全体に広がるだけでなく、少しだけ太くなってテキストをしっかりと支えます。
See the Pen Center Expansion by BaseKENT (@basekent) on CodePen.
調整方法
- ホバー時の太さ:
.line-center:hover::afterのheight: 4px;を変更します。太くしたくない場合はこの行を削除してください。 - 線の色:
background: #111;のカラーコードをアクセントカラー（例：#007aff）にすると、華やかな印象になります。
Sliding Dot & Line（スライディング・ドット）
小さな「点（ドット）」がテキストの下を左右に滑り続けます。遊び心がありつつも洗練されたデザインで、ホバーするとその点が「スッ」と伸びて一本の下線に姿を変えます。
See the Pen Sliding Dot & Line by BaseKENT (@basekent) on CodePen.
調整方法
- ドットの大きさ:
widthとheightの6pxを大きくすると、より目立つポップな点になります。その場合、@keyframesのcalc(100% - 6px)の数値も合わせて変更してください。
Double Border Cross（ダブル・ボーダー・クロス）
2本の細い線が、上下に少しズレた状態で別々のリズムで動いています。少し重厚感と建築的な美しさがあり、ホバーすると2本がカチッと揃って、美しい二重線（ダブルライン）を形成します。
See the Pen Double Border Cross by BaseKENT (@basekent) on CodePen.
調整方法
- 線の間隔:
::beforeのbottom: 3px;を5pxなどに変更すると、2本の線の隙間が広がります。 - 動きの複雑さ:
shiftLeftとshiftRightの移動距離（translateX）を変更することで、交差する動きを調整できます。
Minimal Wave Underline（ミニマル・ウェーブ）
テキストの下を、細く滑らかな波線（ウェーブ）が静かに流れ続けます。SVGをCSSの背景として読み込むことで、非常にクリアでモダンな波を表現。ホバーすると波がピシッと真っ直ぐな直線に変化します。
See the Pen Minimal Wave Underline by BaseKENT (@basekent) on CodePen.
調整方法
- 波のスピード:
animation: waveScroll 2sの秒数を小さくすると、波が速く流れます。 - 波線の色を変える:
stroke="%23111"の%23の後ろの3桁（または6桁）の英数字を変更します。例えば青色（#007aff）にしたい場合はstroke="%23007aff"と記述します。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
