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

KuzLog

ページの先頭へ
トップに戻る
2018年1月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に変えれば右からアンダーラインを伸ばすことも出来るんですが、試しに作ってみたらなんか気持ち悪かったのでオススメしません。