マーカーを引いたように複数行のテキストに線を引く方法【CSS】

複数行のテキストに線を引こうとして出来なかった事はありませんか?
今回は改行した時にも使える、マーカーを引いたような線を引く方法を解説していきます。

borderプロパティやtext-decorationプロパティの場合

まず最初に、通常線を引く場合はborderプロパティやtext-decorationプロパティを使用する事が多いと思います。
それらのプロパティで線を引くと下記の例のようになります。

borderプロパティの場合

<p>マーカーを引いたように複数行のテキストに線を引く方法</p>

p {
    border-bottom: 2px solid #8FC051;
}

borderプロパティの場合、ブロックの外枠に対して線を引く事になりますので、上記例のように複数行に対応する事はできません。
また、疑似要素などでも同様に複数行に対応する事は出来ません。

text-decorationプロパティの場合

p {
    text-decoration: underline;
}

text-decorationプロパティは上記例のように複数行に渡って線を引く事が出来ますが、線の種類や色の変更が出来ず、デザイン的に使用出来ない事が多く実用的ではありません。

改行にも対応した複数行の線を引く方法

それでは、どのように複数行に渡って線を引くかというと、backgroundプロパティを使用します。
まずは以下の例をご覧ください。

p {
    display: inline;
    padding: 0 4px 2px 4px;
    background: linear-gradient(transparent 70%, #8FC051 0%);
}

上記例のように、backgroundプロパティでグラデーション(linear-gradient)を使用します。
ポイントは以下の3つです。

• backgroundプロパティでグラデーション(linear-gradient)を使用
• displayプロパティはinlineを指定する
• 線とテキストの余白はpaddingで調整可能

displayプロパティは必ずinlineを指定してください。blockやinline-blockではテキスト毎ではなくブロック全体にグラデーションがかかってしまいます。

linear-gradientについて

今回使用しているbackground: linear-gradientは、マーカーのような線となるので、以下のようなシンプルな指定になります。

background: linear-gradient(色 位置, 色 位置);
/* 上が0%、下が100% */

今回指定したlinear-gradient(transparent 70%, #8FC051 0%)は、上から70%の位置まで透明、上(0%)から下(100%)まで緑色となります。
通常は上から下に指定した色が徐々に切り替わっていきますが、二つ目の色(緑色の線)を上から0%の位置から開始にする事できっぱりと色が分かれたグラデーションにする事が可能です。

位置を指定しないで色のみを指定すると、綺麗なグラデーションになったりしますので、色々を試してみて下さい。

さいごに

いかがでしたでしょうか。
今回はマーカーを引いたように複数行のテキストに線を引く方法を解説しました。
この方法を覚えておくと、複数行の線で躓く事も無くなります。spanタグに変えて実装するなど、環境に合わせてぜひお試しください。