CSSで下線じゃなくマーカー風にテキストをハイライトする方法

マーク

テキストを目立たせたい時、よく文字サイズや文字色を変えたり、下線を付けたりします。
リアルの紙の場合、よく蛍光マーカーで色を付けたりしますが、あれをborderでは再現できません。

以前はbackground-imageを使って専用の画像を作っていましたが、CSS3の「linear-gradient属性」を使うことで、画像を使わずCSSだけで見せることが出来るので紹介します。

蛍光ペンでマーキングしたように見せることが出来る「linear-gradient属性」

transparentのパーセントを変えることで下半分だけマークすることも出来ます。