Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2018/01/17 2018/01/17 Web制作

【CSS】マウスオーバーするとアンダーラインがヌルッと伸びてくるテキストの作り方

マウスを乗せるとアンダーラインがヌルっと出てくるリンクテキストを最近良く見るので、使用率が高そうな2パターンを作ってみました。


デモで使っているHTMLはこれだけです。

これにちょいとCSSを加えるだけで、ヌルっと伸びるアンダーラインが作れます。

中央から出てくるパターン

See the Pen GyYQgZ by Kuzlog (@Kuzlog) on CodePen.

変化に掛かる時間や線の太さ、色などはお好みで変えちゃってください。

左から出てくるパターン

See the Pen wpYyYy by Kuzlog (@Kuzlog) on CodePen.


この左から伸びてくるやつ最近色んなとこで見るけど、お洒落だからうちのブログにも取り入れようかしら…

ちなみにtransform-originrightに変えれば右からアンダーラインを伸ばすことも出来るんですが、試しに作ってみたらなんか気持ち悪かったのでオススメしません。