どもです。

お客から貰ったデザインにて、文字にマーカーが引いてあるところがありました。
擬似要素使って色をずらし敷く必要があるかな？と思いましたが、
調べてみると、background:linear-gradient を使ってマーカー風に背景を引く技術が紹介されていました。

参考サイト様
IT便利帳【蛍光ペン風にテキスト上をマーカーするCSSを設定してみた】

しかし、どうして蛍光ペンのように線が引けるのか、ぱっと見ただけではわからなかったので、
分析してみることにしました。

background:linear-gradient とは

そもそも僕は、linear-gradient というものに馴染みがありませんでした。
ので、調べてみると、どうやら線形のグラデーションを作るCSSということが判明。

参考サイト様
HALAWATA.NET【CSS3プロパティ 線形グラデーション】

本来はグラデーションのためのものなんですね。
いわく、その構造はこうなっているそうです。

途中の色は、いくつ挟んでもおｋ。
位置を示す数値は、その数値の地点で完全に指定の色になる。

また、このコマンドは完全に対応しているブラウザが少なく（まだ無く？）
対策なしでは開始方向・角度をつけると効かなくなるっぽいです。
基本的にはベンダープレフィックスをつけた記載もしておいて、
複数のブラウザで逐一チェックした方が良さそうです。

とはいえ、マーカーを作る分には開始方向・角度の設定は要らないので（デフォルトが上から下）、
新しいブラウザだけならベンダープレフィックスは不要です。

linear-gradient でマーカー風背景を作る原理

linear-gradient の基本構造がわかったので、マーカーを作ってみます。
マーカーの基本構造は、

です。
開始方向・方角は指示しない場合、上から下・角度なしとみなされるので、
開始位置と終了位置のみ指定した形です。
また、開始の色を透明に、終了の色をマーカーの色とします。
このとき、開始位置と終了位置を同じ数値にすると、マーカー風の色が引けるという算段。

つまり、こういうことです。

グラデーションの開始位置までは開始時点の色（この場合は透明）、
グラデーションの終了以降は終了時点の色（マーカーの色）。

つまり、開始位置と終了位置が同じなら、その数値を境に色がきっぱり分かれるということ。

これを利用してマーカー風背景は作られていたことがわかりました。