黄色いマーカー線を引く方法

2017年7月11日

黄色のマーカー線を引く

文を強調するためにマーカー線を使いたい!!!

黄色のマーカー線にするには・・・

例えばこんな感じ
     ↓
〇〇〇☆☆☆☆☆!!!!!♡♡♡!!!〇〇〇

 

CSSに入力してから使う方法

太い黄色いマーカー線

☆☆☆☆☆!!!!!♡♡♡!!!

CSS

.yellow-line{
background:linear-gradient(transparent 40%, #ffea00 0%);
}

#ffea00 は色の番号(中黄色)なので変更可能
yellow-line も変更可能。 赤だったら red-line とか。
ラインの太さは 太0% ⇔ 細90% で、調節可能 (100%は文字全体のマーカーラインになる)

 

細い黄色いマーカー線

☆☆☆☆☆!!!!!♡♡♡!!!

.yellow-line{ background:linear-gradient(transparent 60%, #ffea00 0%); }

 

 

記事入力の時、↓のコードを入力すると、黄色のマーカーの強調線で表示することができる。

HTML

<b class="yellow-line">☆☆☆☆☆!!!!!♡♡♡!!!</b>
<span class="yellow-line">☆☆☆☆☆!!!!!♡♡♡!!!</span>