【CSS】テキストの行全体に下線をつける方法

CSSでテキストに下線をつける場合、基本的には以下のようにtext-decorationを使って設定する。

.underline {
  line-height: 2.4;
  text-decoration: underline;
}

text-decorationで設定する下線は上記のように、テキストのみにスタイルが適用されるが、行全体に下線を付けたいケースがある。

今回は以下のようなスタイルを適用するためのCSSコードを紹介する。

こちらのコードが該当の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%」に設定してみると以下のようなグラデーションが背景に適用される。

これを利用し、下線に当たる下部以外を透過させるため「97%」に指定する。

あとは、line-heightとbackground-sizeに同じ値を設定し、好みの高さに調整すればOKだ。