今回作りたいもの

テキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。

HTMLの準備

表示したいテキストを自由に書きます。
今回は、h1タグとpタグでそれぞれ書きました。

タグは自由です。divでもh2でも。

All their equipment and instruments are alive.
All their equipment and instruments are alive. All their equipment and instruments are alive. All their equipment and instruments are alive.

下線を引きたいテキスト部分にクラス名をつけます。

ここでは class=”underline” としました。

クラス名も自由です。

テキストにCSSで下線を引く

テキストにグラデーションの下線を引くには background を利用します。

.underline {
            background-image: linear-gradient(120deg, #5cedff 0%, #f096ff 100%);
            background-repeat: no-repeat;
            background-size: 100% 0.4em;
            background-position: 0px 90%;
}

1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色 開始位置, 終了色 終了位置)となっています。
今回は120度の角度で、テキストの頭（0%の位置）を水色に、テキストの最後（100%の位置）を紫にしています。

2. background-repeatは、今回は繰り返さないのでなしにしています。

ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓

3. 下線っぽくするには、background-sizeで高さを調整します。
background-sizeは(横のサイズ 縦のサイズ)となっているので、
今回は(横100% 高さ0.4em)としています。

ここでは単位は%, emのほか、pxも使用できます。

ここまでの1〜3で、上から下線ができました。↓↓↓

4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。
background-positionは(左からの開始位置 上からの開始位置)となっており、
今回は(左から開始 上は90%の位置から開始)としています。

これも単位は%やpxなどを使用できます。

動きをつけよう

せっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。

.underline:hover {
            background-size: 100% 90%;
}

ホバー時に、background-sizeの高さの方を90%にします。（100%でもいいですよ。）

するとこんな感じ↓↓↓

カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。

transitionは動きをスムーズにできる

underlineにcssでtransitionを設定追加します。

.underline:hover {
            transition: background-size 0.25s ease-in;
}

ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。
＊0秒だと、さっきのカクカクした動作。

そして完成。

最終的な動作はこちらから

デモページはこちらからご確認いただけます。
http://sample.creativeflake.com/gradunderline.html