2023/01/07 (更新日: 2023/07/14)

CSSでテキストに下線を引く3つの方法

今回は、テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。
それぞれの方法ごとに出来ることできないことがあったりしますので、それぞれの特徴についてもまとめておきます。

今回紹介する方法で使用するCSSのプロパティは下の３つです。

text-decoration
background:linear-gradient
border-bottom

これら三つの方法でテキストにマーカー状の下線を引いたときの例は、それぞれ下のようになります。
どの方法を使っても特に問題なく線は引けますが、位置や太さの調整などがしやすくて使いやすいのはtext-decorationを使った下線ではないかと思います。

・text-decorationを使ったマーカーライン

See the Pen
Untitled by saku (@web-saku)
on CodePen.

・background:linear-gradientを使ったマーカーライン

See the Pen
Untitled by saku (@web-saku)
on CodePen.

・border-bottomを使ったマーカーライン

See the Pen
Untitled by saku (@web-saku)
on CodePen.

上記三つの方法それぞれの特徴を簡単にまとめると、下記のようになります。

text-decoration	・線の色、太さ、位置、スタイルをアレンジするプロパティが用意されているので調整しやすい・一部の英文字などの下線が途切れないようにするには`text-decoration-skip-ink`の指定が必要
background:linear-gradient	・線の太さの調整がしにくい・線の位置の調整がしにくい・グラデーションなので徐々に線の色が出るようにしたり、複数の色を使った線を引くことができる
border-bottom	・線の色、太さ、スタイルをアレンジするプロパティが用意されているので調整しやすい・線の位置の調整がしにくい・改行があるテキストに線を引くのに手間がかかる

次の項目からは、それぞれのプロパティについて具体的に紹介していきます。

text-decoration

text-decorationは、テキストの下線だけでなく、打ち消し線を引くのに利用されたり、横書きテキストの上側や縦書きテキストの左右に線を引くこともできるプロパティです。太さや位置の調整もできますので、テキストにマーカーのようなラインを引きたい時にも利用できると思います。
基本的なCSSの記述例は下記のようになります。

.under-line {
   text-decoration-line: underline;
}

text-decorationについて詳しくは、下記のページを参考にしてみてください。
[参考] text-decoration – CSS: カスケーディングスタイルシート | MDN

text-decorationを使用してテキストに下線を引く場合、下記のようなアレンジを加えることができます。

色の変更

text-decorationを利用した下線の色を変更するには、text-decoration-colorプロパティを使用します。

下線の色をCSSの色名称で指定する他、カラーコードやrgbaで指定することができます。

CSSで利用できる色名については、下記ページを参考にしてみてください。
[参考] <named-color> – CSS: カスケーディングスタイルシート | MDN

太さの変更

text-decorationを利用した下線の太さを変更するには、text-decoration-thicknessプロパティを使用します。

下線の太さをpxやemで指定することができます。

位置の調整

text-decorationを利用した下線の位置を変更するには、text-underline-offsetプロパティを使用します。

下線の位置をpxやemで指定することができます。
値が大きくなるほど下線の位置が下側に移動します。マイナスの値を指定することで上側に移動させることもできます。

スタイルの変更

text-decorationを利用した下線のスタイルを変更するには、text-decoration-styleプロパティを使用します。

下線のスタイルを初期値の一本線solidの他、二重線doubleや点線dotted、破線dashed、波線wavyから選択することができます。

その他

text-decorationを利用した下線では、初期値ではアルファベットの「g」や「j」などの下側に伸びた部分があるテキストの部分では下線が途切れてしまうようになっています。
これは文字の読みやすさという点では良い場合もありますが、テキストに下線を引くという点では線が途切れないで欲しいといった場合もあるため、少し前まで下線を引く場合の手段としてtext-decorationが避けられる理由となっていたのですが、現在ではそれを解消するためのtext-decoration-skip-inkというプロパティが用意されており、主要なブラウザがサポートするようになったため、必要であればtext-decorationを利用した下線であっても線が途切れないようにすることができるようになっています。

各プロパティの適用状態

text-decorationの各プロパティの適用状態は以下のようになります。
（ショートハンドで一括指定できるプロパティもありますが、ここでは別々の記述で紹介しています。）

See the Pen
Untitled by saku (@web-saku)
on CodePen.

background:linear-gradient

background:linear-gradientは、テキストの背景にグラデーションをかけることで下線が引かれているように見せる方法です。テキストにマーカーのような太いラインを引きたいときによく使われている方法になります。
基本的なCSSの記述例は下記のようになります。
（グラデーションの方向を指定するto bottomは、初期値なので省略しても同じ結果になります。）

.under-line {
  background: linear-gradient(to bottom, transparent 0% 60%, #FF57CD 60% 100%);
}

background:linear-gradientについて詳しくは、下記のページを参考にしてみてください。
[参考] linear-gradient() – CSS: カスケーディングスタイルシート | MDN

background:linear-gradientを使用してテキストに下線を引く場合、下記のようなアレンジを加えることができます。

色の変更

background:linear-gradientを利用した下線の色を変更するには、linear-gradient()内で指定している色を変更します。

下線の色を色名称で指定する他、カラーコードやrgbaでも指定することができます。

太さの変更

background:linear-gradientを利用した下線の太さを変更するには、linear-gradient()内で指定している%の数値を変更します。

位置の調整

background:linear-gradientを利用した下線では、位置を調整するようなプロパティは用意されていません。
下側のpaddingを大きくすることで下線の位置を下側に移動させることはできます。ただしこの場合、線の太さも変わってしまうので太さの再調整が必要になります。

その他

background:linear-gradientを利用した下線は、グラデーションであることを利用したアレンジを加えることができます。
例としては、下線の境界線をぼやけさせたり、複数の色を使った線にしたりすることができます。具体的な例は下記をご覧ください。

各プロパティの適用状態

background:linear-gradientの各アレンジの適用状態は以下のようになります。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

border-bottom

border-bottomは、テキスト部分の下側のボーダーを表示させることで下線を引く方法です。

border-bottomの特徴としては、borderなので複数行に渡るテキストに下線を引きたい場合に使いにくいという点が挙げられます。
基本的なCSSの記述例は下記のようになります。

.under-line {
  border-bottom: solid;
}

border-bottomについて詳しくは、下記のページを参考にしてみてください。
[参考] border-bottom – CSS: カスケーディングスタイルシート | MDN

border-bottomを使用してテキストに下線を引く場合、下記のようなアレンジを加えることができます。

色の変更

border-bottomを利用した下線の色を変更するには、border-bottom-colorプロパティを使用します。

下線の色をCSSの色名称で指定する他、カラーコードやrgbaで指定することができます。

太さの変更

border-bottomを利用した下線の太さを変更するには、border-bottom-widthプロパティを使用します。

下線の太さをthick（太い）・thin（細い）・middle（中間：初期値）から選択する他、pxやemで指定することもできます。

位置

border-bottomを利用した下線では、位置を調整するようなプロパティは用意されていません。
線の位置を調整するには、下側のpaddingを大きくすることで下線の位置を下側に移動させることはできます。
又は、line-heightを調整したり、擬似要素を利用することでも位置を調整することができます。
line-heightを変えた時の挙動と疑似要素を使う時の記述例について紹介しておきます。

line-heightを変えた時の挙動

See the Pen
Untitled by saku (@web-saku)
on CodePen.

疑似要素を使う時の記述例

HTML
<p>テキストに<span class="marker-line">マーカーライン</span>を引きます。</p>

CSS
.marker-line {
  position: relative;
}

.marker-line:after {
  content: '';
  width: 7em;
  position: absolute;
  bottom: 2px;
  left: 0;
  border-bottom: solid 6px rgba(255, 87, 205, .5);
}

スタイル

border-bottomを利用した下線のスタイルを変更するには、border-bottom-styleプロパティを使用します。

border-bottom-styleの初期値はnoneとなっており、何も指定しないと線が表示されないのでいずれかのスタイルを指定する必要があります。
border-bottom-styleにはたくさんのスタイルが用意されていますが、主な下線のスタイルには一本線solidの他、二重線doubleや点線dotted、破線dashedなどがあります。