CSSの「linear-gradient」でラインマーカーを引いてみる

2017-10-27

CSSを使って文字にラインマーカー風の修飾を行ってみます。

linear-gradientでラインマーカーを引く

今回はlinear-gradientを使ってラインマーカーを実現します。

ポイント
background : linear-gradient(<開始位置>, <開始色>, <途中色>, <終了色>);

スタイルシートで以下の設定をします。

このクラスを利用して次のように文字を書くと

ここは10%の黄色のマーカー

のようになります。