テキストのアンダーラインをグラデーションにする - HTML・CSSテックラボ - [SMART]

テキストにアンダーラインを付け加えたい場合、CSS属性のtext-decorationの値にunderlineをセットするのが一番簡単な方法です。 Pug .h-1 Jaan span.underline-demo Pehechaan | Ho CSS <style> .underline-demo{ text-decoration: underline; } </style> ただし、この方法だとアンダーラインの太さや色を自由に設定することはできません。text-decorationを使う代わりに、background属性を使うと背景の色やサイズをコントロールすることができます。今回は見栄えにこだわり、グラデーションのアンダーラインを作成します。グラデーションはlinear-gradient()関数を使います。 構文： linear-gradient( グラデーションの角度または方向,