CSSでテキストに下線をつける場合、基本的には以下のようにtext-decorationを使って設定する。
.underline {
line-height: 2.4;
text-decoration: underline;
}
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/08/image-14.png?resize=974%2C376&ssl=1)
text-decorationで設定する下線は上記のように、テキストのみにスタイルが適用されるが、行全体に下線を付けたいケースがある。
今回は以下のようなスタイルを適用するためのCSSコードを紹介する。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/08/image-15.png?resize=968%2C382&ssl=1)
こちらのコードが該当のCSSで、簡単に解説すると、まず下線をbackground-imageで設定するところがポイント。
.underline {
line-height: 2.4;
background-image: linear-gradient(180deg, rgba(204,204,204,0) 0%, rgba(204,204,204,0) 97%, #000 100%);
background-repeat: repeat-y;
background-size: 100% 2.4em;
}
background-imageにlinear-gradientを設定しているのだが、3行目の「97%」を「0%」に設定してみると以下のようなグラデーションが背景に適用される。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/08/image-16.png?resize=976%2C356&ssl=1)
これを利用し、下線に当たる下部以外を透過させるため「97%」に指定する。
あとは、line-heightとbackground-sizeに同じ値を設定し、好みの高さに調整すればOKだ。