テキストにアンダーラインを付け加えたい場合、CSS属性のtext-decorationの値にunderlineをセットするのが一番簡単な方法です。
Pug
.h-1 Jaan
span.underline-demo Pehechaan
| HoCSS
<style>
.underline-demo{
text-decoration: underline;
}
</style>ただし、この方法だとアンダーラインの太さや色を自由に設定することはできません。text-decorationを使う代わりに、background属性を使うと背景の色やサイズをコントロールすることができます。今回は見栄えにこだわり、グラデーションのアンダーラインを作成します。グラデーションはlinear-gradient()関数を使います。
構文：
linear-gradient( グラデーションの角度または方向, 開始色, 途中色, 終了色 )
次の例では、SPANで囲ったテキストの背景にグラデーションをかけています。この時点ではアンダーラインというより単なる背景色ですね。
Pug
.h-1 Jaan
span.underline-gradient Pehechaan
| HoCSS
<style>
.h-1 .underline-gradient{
background-image: linear-gradient(to right, #185a9d, #43cea2);
color: #fff;
}
</style>それでは、アンダーラインっぽく見えるように調整してみましょう。せっかくグラデーションを掛けたので、アンダーラインの線は太めにします。線のように見せるポイントはbackground-size属性です。
background-sizeは色々な指定方法がありますが、ここでは次の構文を使います。
background-size: 横幅 縦幅
この構文を使って、縦幅を短くすることができます。縦幅の指定を100%以下にすれば線が細くなります。これで短くはなるのですが、このままだと線が上付きになってしまうので、background-position属性にbottomを指定します。全容は次の通りです。
Pug
.h-1 Jaan
span.underline-gradient2 Pehechaan
| HoCSS
<style>
.h-1 .underline-gradient2{
background-image: linear-gradient(to right, #185a9d, #43cea2);
background-repeat: no-repeat;
background-size: 100% 30%;
background-position: bottom;
}
</style>ロールオーバー時のアニメーションも付け加えてみましょう。transition属性を使い、アニメーションは背景のサイズのフォントのカラーとします。
Pug
.h-1 Jaan
span.underline-gradient3 Pehechaan
| HoCSS
<style>
.h-1 .underline-gradient3{
background-image: linear-gradient(to right, #185a9d, #43cea2);
background-repeat: no-repeat;
background-size: 100% 30%;
background-position: bottom;
transition: all 0.25s ease-in;
}
.h-1 .underline-gradient3:hover{
background-size: 100% 100%;
color: #ffffff;
}
</style>単色でよければ、linear-gradient属性のtransparentでも同様のことができます。linear-gradient属性のtransparentは透かし範囲の指定なので、100%に近くなるほど線が細くなります。
Pug
.h-1 Jaan
span.underline-gradient5 Pehechaan
| HoCSS
<style>
.h-1 .underline-gradient5{
background-image: linear-gradient(transparent 70%, #43cea2 0)
}
</style>CodePenでもコードを公開しています。