【CSS】蛍光ペン風マーカーのスタイルをテキストに設定する

蛍光ペン風マーカーのスタイルは、Webサイトを制作していると頻繁に使うので、メモがてらに記録しておきたいと思います。
色鮮やかに文章を強調してくれるので、見た目も良く、文章も読みやすくなります。

蛍光ペン風マーカーのCSS設定

CSSのプロパティ1つだけで実装が可能です。
「background」プロパティに「linear-gradient() 関数」を設定します。

細い蛍光ペン風マーカー

サンプルテキスト

strong{
	background: linear-gradient(transparent 60%, #afa 60%);
}

太い蛍光ペン風マーカー

サンプルテキスト

strong{
	background: linear-gradient(transparent 0%, #afa 0%);
}

上記のサンプルを見てのように「〇〇%」の数値を変更することで、蛍光マーカーの線の太さを変えることができます。
「#afa」を変更すると、色を変えることができます。

設定は以上となります。
是非、お気に入りの色で蛍光ペン風マーカーを使ってみてください！