CSSで文字の下半分にマーカー線を引く方法をサクッとご紹介！

文字の下半分にマーカー線を引く

表示例

コード

HTML

<code>
<p><b>Bタグで囲んだ部分だけ</b>マーカー線が引かれます。</p>
</code>

CSS

<code>
b {
	background-image: linear-gradient(transparent 60%, #bcfa89 60%);
}
</code>

補足

• 60%の部分を変更することで、マーカーの太さを変更
• #bcfa89の部分を変更することで、色を変更