CSSで文字にマーカーをつける場合

CSSで文字にマーカーを付ける場合のコピペ用メモ。

マーカーはlinear-gradient

高さをフルにマーカーを付ける場合

.marker {
background: linear-gradient(transparent 0%, #fff27d 0%);
}

2つの「％」は同じにする。
数値が低いほど太くなり、高いほど細くなる。

マーカー

高さを半分にマーカーを付ける場合

.marker {
background: linear-gradient(transparent 50%, #fff27d 50%);
}

マーカー

下線のようにマーカーを付ける場合

.marker {
background: linear-gradient(transparent 10%, #fff27d 10%);
}

マーカー

あとは、マーカーを付けたいに箇所を、spanで囲えばOK。
font-weightやborder-radiust等で適宜微調整して、
サイトに合ったスタイルにする。