【css】テキストに蛍光ペンのようなマーカーを引く方法

文字を強調したいときにはテキストを太字にしたりアンダーラインを引いたり色を変えたりすることがあると思います。

もう少しテキストを目立たせたいというときにcssでテキストに蛍光ペンのようなマーカーを引くという方法があります。

蛍光ペンというとよく教科書とかに重要な部分があれば黄色のマーカーを引いたことがある人も多いと思います。

今回はcssでテキストに蛍光ペンのようなマーカーを引く方法を紹介していきたいと思います。

テキストに蛍光ペンのようなマーカーを引く方法

cssでマーカーを引く方法はいろいろありますが今回は疑似要素を使ってマーカーを引いていきます。

html

<p>
        <span class="marker">テキストにマーカーをつける</span>     
</p>   

css

p span.marker{ 
	position: relative;
	display: inline-block;
	z-index: 1;
}
       
p span.marker:after{   
	position: absolute;
	content: '';
	left: 0;
	bottom: 3px;
	display: inline-block;
	width: 100%;
	height: 12px;
	background-color: #ffff00;
	z-index: -1;
}      

実際に画面で見てみると下記のようになります。

テキストにマーカーをつける

テキストにマーカーをつけることでより文字が強調させますね。

もちろん強調されますが過度に使いすぎると見づらくなったりするので注意しましょう。