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タグに使用する場合

<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

そのままでは、要素の1番下にしかラインが引けないので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

Share on Twitter
関連記事
CSSで背景画像とグラデーションを重ねる方法
CSSで背景画像とグラデーションを重ねる方法
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで文字間と行間を変更する方法
CSSで文字間と行間を変更する方法