【CSSで簡単】テキストにマーカー（蛍光ペン）っぽい下線をつける方法【text-decoration】

下のようなマーカー（蛍光ペン）っぽい下線を、CSSだけで簡単に実装するには、text-decorationを使うのがおすすめです。

text-decorationなら、非常にシンプルに実装できて、線の太さや位置も簡単にカスタマイズできます。
テキストの途中に改行が入って複数行になっても問題ありません。レスポンシブなどで改行位置が動的に変わっても大丈夫。

そんな、text-decorationを使ったマーカー（蛍光ペン）風の下線の実装を紹介します。

text-decorationを使ったマーカー（蛍光ペン）風の下線

コード

<p>むかし、むかし、あるところに、おじいさんとおばあさんがいました。<br>
  ある日のこと、<span class="marker-line">おじいさんは山へ芝刈りに行き、おばあさんは川へ洗濯に行きました。<br>
  おばあさんが川のほとりで洗濯をしていると、上流の方から大きな桃がひとつ、どんぶらこ、どんぶらこ、と流れてきました。</span>
</p>

.marker-line {
  text-decoration-line: underline; /* 下線 */
  text-decoration-color: rgb(255 255 1 / 0.7); /* 線の色 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

CSSの解説

text-decoration-line

テキストにつける線のスタイルを指定します。一番よく使われるのがunderline（下線）です。
他にも、overline(上線)やline-through（取り消し線）を指定できます。

• MDN:text-decoration-line

text-decoration-color

線の色を指定します。

• MDN:text-decoration-color

text-decoration-thickness

テキストにつける線の太さを指定します。上のコード例ではフォントサイズの半分（0.5em）を指定しています。
em指定にすると、フォントサイズを変えたとき追従して線の太さも変わってくれるため便利です。

• MDN:text-decoration-thickness

text-underline-offset

線の位置を指定します。
下線の場合、デフォルトではテキストの下に線が引かれるため、マーカー風にテキストと重ねて表示するために線の位置を上にずらします。

• MDN:text-underline-offset

text-decoration-skip-ink

線と文字が重なる部分の処理を指定します。
デフォルトでは線と文字が重なる部分は線が省略されてしまいます。noneを指定することで、テキスト全体に渡って線が引かれます。

• MDN:text-decoration-skip-ink

text-decoration-style

線の種類を指定します。
デフォルトはsolid(１本線)です。そのため上のコード例では指定を省略しています。
solidの他に、double(二重線)、dotted(点線)、dashed(破線)、wavy(波線)を指定可能です。

• MDN:text-decoration-style

ショートハンド (text-decoration)を使った書き方

text-decorationプロパティを使ってtext-decoration-line、text-decoration-color、text-decoration-style および text-decoration-thicknessを一括指定できます。

.marker-line {
  text-decoration: underline rgb(255 228 0 / 0.7) 0.5em;　/* 下線 色 太さ (styleは省略)*/
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

※残念ながらtext-underline-offsetとtext-decoration-skip-inkは一括指定できないため、別途指定する必要があります。

• MDN:text-decoration

text-decorationのデメリット：単色の線しか表現できない

上記のように、text-decorationを使うことでシンプルにマーカー（蛍光ペン）風の下線を実装できます。
しかし、text-decorationで表現できるのは単色の線のみです。
下線の色をグラデーションにしたり、ストライプにしたりといった、こだわった色の下線はtext-decorationでは表現できません。

こだわった色の下線を実現するには、background + linear-gradientを使う方法があります。

background + linear-gradient：こだわった色のマーカー下線を表現する

ここからは、background + linear-gradientをつかったグラデーションのマーカー下線やストライプの下線の実装を紹介します。

グラデーションのマーカー下線

コード

.marker-line{
  display: inline;
  background: linear-gradient(to right, rgb(192 255 255 / 0.7), rgba(0 0 255 / 0.7)) no-repeat, transparent;
  background-size: 100% 50%;  /* 背景色の高さ50% */
  background-position: 0 100%;  /* 上から70%位置に配置して下部を塗る */
}

コード解説

・background

背景色を指定します。
コード例では、linear-gradientでグラデーションを指定。

・background-size

背景色のサイズを指定します。
コード例では、幅100%、高さ50％を指定しています。

・background-position

背景色の配置を指定します。
コード例では、要素の左端（0%）かつ垂直方向の一番下（100%）を指定することで、高さ50％の背景色が要素の下部にくるようにしていています。

ストライプ柄のマーカー下線

コード

.my-marker-line{
  display: inline;
  background: repeating-linear-gradient(to right, hotpink 0px, hotpink 20px, cyan 20px, cyan 40px) no-repeat, transparent;
  background-size: 100% 25%;
  background-position: 0 100%;
}

コード解説

・background

背景色を指定します。
コード例は、repeating-linear-gradientで、hotpinkとcyanの繰り返しを指定です。

・background-size

背景色のサイズを指定します。
コード例では、幅100%、高さ25％を指定しています。

・background-position

背景色の配置を指定します。
コード例では、要素の左端（0%）かつ垂直方向の一番下（100%）を指定することで、高さ50％の背景色が要素の下部にくるようにしていています。

background + linear-gradientのデメリット

Backgroundはテキストではなく要素に対して背景色を指定するプロパティです。
その性質上、要素がinline-blockやblockだと、テキストが改行したとき一番下の行にしか下線がつきません。
そのため、要素がinline-blockやblockの場合は、レスポンシブなどで改行が発生すると表示が崩れてしまいます。

まとめ

シンプルなマーカー（蛍光ペン）風の下線なら、　text-decorationを使うことでCSSだけで簡単に実装できます。
text-decorationで、実装案件のほとんどに対応できるでしょう。

複雑な配色の下線の実装は、background + linear-gradientで対応できます。

text-decorationとbackground + linear-gradient、この2つを覚えておけばマーカー風の下線はバッチリです！