サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

HTML

<p><span class="marker01">黄色い線</span>が入ります</p>
<p><span class="marker02">黄色い線</span>が入ります</p>
<p><span class="marker03">黄色い線</span>が入ります</p>
<p><span class="marker04">黄色い線</span>が入ります</p>
<p><span class="marker05">黄色い線</span>が入ります</p>

CSS

.marker01{
background: linear-gradient(transparent 0%, #f1ff00 0%);
}
.marker02{
background: linear-gradient(transparent 20%, #f1ff00 20%);
}
.marker03{
background: linear-gradient(transparent 40%, #f1ff00 40%);
}
.marker04{
background: linear-gradient(transparent 60%, #f1ff00 60%);
}
.marker05{
background: linear-gradient(transparent 80%, #f1ff00 80%);
}

マーカーの太さは、任意の値を設定可能。上記のサンプルでは、「0%」「20%「40%」「60%」「80%」を指定していて、パーセントの割合が大きくなるほど、線は細くなる

イメージとしては、文字の上辺を基準として、そこからどの位置までを「transparent(透明)にするか」という感じ。例えば「60%」なら、上辺から60%分が透明な状態になる。

マーカーの色を変えたい場合は、お好みで。