text-decorationでマーカー（蛍光ペン風の下線）を引く方法

文字に蛍光ペンのようなマーカーを引くCSSを、linear-gradientを使う方法と、text-decorationを使う方法で比べます。

背景にグラデーションを指定して、下の部分だけに色を付ける方法です。

1<span class="marker">マーカー</span>

1.marker {2  line-height: 1.6; /* 無くても良い */3  background-image:4    linear-gradient(transparent 60%, #ff6 0%);5}

背景なので、paddingを指定すれば、以下のように左右に余白を持たせることができます。

マーカーの位置を調整しようとすると、以下のように記述が長くなります。また、単位が%なので、線の太さを固定できません。文字の大きさや行の高さが変わると、線の太さも変わります。
結果的に、感覚での調整になってしまいがちです。

1.marker {2  background-image:3    linear-gradient(transparent 61%, #ff6 61%, #ff6 85%, transparent 85%);4}

下線を太くして、文字に重なる位置まで上げる方法です。

1<mark class="marker">マーカー</mark>

1.marker {2  text-decoration-line: underline;3  text-decoration-color: #ff6;4  text-decoration-thickness: 14px;5  text-decoration-skip-ink: none;6  text-underline-offset: -4px;7  background-color: unset; /* デフォルトの背景を削除 */8}

text-decoration-thicknessが線の太さ、text-underline-offsetが線の位置です。text-decoration-skip-ink: noneは、文字と重なる部分で線が途切れないようにする指定です。

<mark>は、ブラウザの既定のスタイルで背景に色が付くので、background-color: unsetで消しています。

線の太さと位置を、pxなどの単位でそれぞれ指定できます。<mark>タグに共通で上記のCSSを適用して、値をカスタムプロパティにしておけば、位置や色の変更も容易です。

下線は文字のある範囲にしか引かれないので、linear-gradientの方法のように左右の余白を調整することはできません。テキストの位置だけに線を引くのであれば、あまり気にすることではないかと思います。

• text-decoration-skip-inkは、Safariでは15.4から対応しています。それより前のSafariでは、文字と重なる部分で線が途切れます。
• text-decoration: underline #ff6 14px;のようにショートハンドで色や太さを書く方法は、Safariでは26.2から対応しています。それより前のSafariでは下線が表示されないので、上のコードのように個別のプロパティで書いてください。

• text-decoration プロパティ (CSS) - CSS | MDN⁠（新しいタブで開く）
• <mark>: テキストマーク要素 - HTML | MDN⁠（新しいタブで開く）