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

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

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

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

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

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

.yellow {
    background: linear-gradient(transparent 70%, #ffff66 70%);
}

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

<span class="yellow">ここは黄色のマーカー</span>

ここは黄色のマーカー

となります。

ここでの「transparent」は透明を表します。

引数にある「70%」を大きくすると細い線、小さくすると太い線でマーキングします。

.yellow {
    background: linear-gradient(transparent 90%, #ffff66 90%);
}

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

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

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

のようになります。