【CSS】蛍光マーカーっぽい下線を引く方法とは？

2021-01-15

こんにちは、しのです。

今回はCSSにて、文章に蛍光マーカーっぽい下線を引く方法について、解説していきます。

文章に蛍光マーカーっぽい下線を引く方法とは？

CSSの「background」プロパティに、「linear-gradient」というグラデーションを行う値を設定することで、マーカーっぽい下線が引かれているように見せることができます。

下記、設定例となります。

.line_yellow{
background:linear-gradient(transparent 80%, yellow);
}

この例では「line_yellow」というクラスに対して下線を設定しています。

「linear-gradient(transparent 80%, yellow)」

の部分については、「上部80%は透明にして、80%からだんだんyellowにしていくグラデーションを行う」という内容です。

この「80%」を「50%」など小さい数字にすると線が太くなり、「yellow」の色指定を他の色に変更したりすることで様々な下線を引くことが出来ます。