CSSでテキストにアンダーラインマーカーを引く方法

cssでテキストに蛍光ペンでアンダーラインを引いたような装飾をつける方法の備忘録です。

テキストにシンプルな下線を引く場合、text-decoration: underline;やborder-bottomを使用する方法がありますが、今回のマーカーのようにテキストの後ろにもラインを引きたい場合、背景のグラデーションを利用します。

SAMPLE UNDERLINE

.marker {
  background: linear-gradient(transparent 60%, #ccffec 0%);
}

linear-gradientを使用して背景の上から60%を透過、残りに色をつけることで文字に重なるマーカー風のアンダーラインを作成しています。

「#ccffec」の部分で色を変更できます。

SAMPLE UNDERLINE

.marker {
  background: linear-gradient(transparent 60%, #ffccec 0%);
}

transparentの値を変更することで、ラインの太さを変更できます。
例えば、transparent 値を「30%」にすると、色の部分が大きくなるのでマーカーのラインが太くなります。
また、下にはみ出る部分を大きくしたい場合は、paddingでテキスト下の余白を調整します。

SAMPLE UNDERLINE

.marker {
  background: linear-gradient(transparent 30%, #ccffec 0%);
  padding-bottom: 2px;
}

padding-bottomに「2px」を設定して、少し下にはみ出る部分を大きくしました。

ブロック要素に使用する場合の横幅の調整

divや見出しのhタグなどのブロック要素にアンダーラインマーカー設定する場合、そのままではアンダーラインが横幅いっぱいになるので、文字の長さに合わせるためにインラインブロック要素に変更するか、spanタグなどで囲いクラスを定義するように使用します。

<h2 class="marker">SAMPLE UNDERLINE</h2>

.marker {
  background: linear-gradient(transparent 60%, #ccffec 0%);
}

SAMPLE UNDERLINE

そのままでは、横幅いっぱいまでラインが伸びてしまうのでspanタグで調整します。

<h2> <span class="marker">SAMPLE UNDERLINE</span></h2>

SAMPLE UNDERLINE

また、構造上問題なければ<h2>をdisplayでインラインブロック要素に変更する方法もあります。

<h2 class="marker">SAMPLE UNDERLINE</h2>

.marker {
  background: linear-gradient(transparent 60%, #ccffec 0%);
  display: inline-block;
}

マーカーのラインを左右にはみ出したい場合は、下部分と同様にpaddingで調整します。

.marker {
  background: linear-gradient(transparent 60%, #ccffec 0%);
  padding: 0 10px;
}

SAMPLE UNDERLINE

paddingで左右に「10px」ずつ余白を追加しました。

複数行のテキストに使用する場合も、ブロック要素では行毎にマーカーを引くことができません。この場合も、インラインブロック要素に変更するか、spanタグなどを用いて使用します。

SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT

そのままでは、要素の１番下にしかラインが引けないのでspanタグで調整します。

SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT

spanタグを使用すれば、テキストの一部だけラインを引くことも可能です。

SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT SAMPLE UNDERLINE LONG TEXT