今回は「テキストにラインマーカーっぽい装飾を付けるCSS」の紹介です
基本のスタイル
まずは基本的なラインマーカー風のスタイルです
See the Pen marker by subaru (@subaru_works) on CodePen.
ラインマーカーを実現しているのは背景のグラデーションになります
background: linear-gradient(transparent 60%, #e0ff5e 60%);
上から下にかけて透明からピンク色へグラデーションする設定になっています
上から60%のところまで透明、60%から下まではピンク色という設定にすることで
クッキリと色を分けることができます。
他は padding: 0 4px; で左右に少しだけ余白を入れています
注意事項
ラインマーカー風の背景グラデーションを掛ける要素は「display: inline」の要素にかけると
それらしく見えます。
block要素にかけてしまうと幅いっぱいに背景が表示されます
block要素にスタイルを設定した場合
See the Pen marker by subaru (@subaru_works) on CodePen.