現役エンジニア・デザイナーの備忘録ブログ

テキストにマーカー風ラインを引く

See the Pen Untitled by nanami (@nanami_po) on CodePen.

<p>こちらは<span class="line01">マーカー部位分が20%</span>のイメージです</p>
<p>こちらは<span class="line02">マーカー部位分が40%</span>のイメージです</p>
<p>こちらは<span class="line03">マーカー部位分が70%</span>のイメージです</p>
.line01 { 
background:linear-gradient(transparent 80%, #ffe663 80%);
}
.line02 { 
background:linear-gradient(transparent 60%, #ffe663 60%);
}
.line03 { 
background:linear-gradient(transparent 30%, #ffe663 30%);
}