[CSS] ラインマーカーを引いてみる

CSSを使って、ラインマーカー(ハイライト）で線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付けるよりも見た目にも良く、注意を引く事が出来ます。一般的なタイプと太さが調節できるlinear-gradientを使ったタイプの2種類ご紹介します。

共通のhtml

<p>文中の<span class="line-marker">ここだけ</span>にラインマーカーで線を引いた感じ</p>

文字にしっかりラインマーカーを引いた感じ

色、paddingはお好みで調整して下さい。

.line-marker {
    background-color: #FFEE00;
    padding: 4px 8px;
}

太さが調整できるラインマーカー

グラデーション関数のlinear-gradient()を使います。
詳しくは　MDN Web Docs　にあります。

.line-marker{background: linear-gradient(transparent 30%, #F6EB61 30%);}

linear-gradient(横に伸びる線 太さ, 色　太さ);

太さの数値を小さくするとラインマーカー太くなり、大きくすると細くなります。ちょっとだけ上から文字が出ているくらいが事前な感じで見栄えが良いと思います。