マウスを乗せるとアンダーラインがヌルっと出てくるリンクテキストを最近良く見るので、使用率が高そうな2パターンを作ってみました。
デモで使っているHTMLはこれだけです。
|
1 2 3 |
<div> <a href="#">＊マウスを乗せてね！＊</a> </div> |
これにちょいとCSSを加えるだけで、ヌルっと伸びるアンダーラインが作れます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
a{ display: inline-block; position: relative; color: #555; text-decoration: none; } a:before{ content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: #555; transform: scale(0, 1); transition: 0.4s; } a:hover:before { transform: scale(1); } |
See the Pen GyYQgZ by Kuzlog (@Kuzlog) on CodePen.
変化に掛かる時間や線の太さ、色などはお好みで変えちゃってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
a{ display: inline-block; position: relative; color: #555; text-decoration: none; } a:before{ content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: #555; transform: scale(0, 1); transform-origin: left; transition: 0.4s; } a:hover:before { transform: scale(1); } |
See the Pen wpYyYy by Kuzlog (@Kuzlog) on CodePen.
この左から伸びてくるやつ最近色んなとこで見るけど、お洒落だからうちのブログにも取り入れようかしら…
ちなみにtransform-originをrightに変えれば右からアンダーラインを伸ばすことも出来るんですが、試しに作ってみたらなんか気持ち悪かったのでオススメしません。
