TIPS

【改行対応】コピペでつかえる蛍光ペン風マーカー

最近、ブログ等で、強調する文字を「蛍光マーカー」で塗ったようなデザインをよく見ます。
文字の背景がハイライトされることで、強調する意味合いがより分かりやすくなるので重宝しますよね。

色々なサイトで実装テクニックが公開されていますが、本物のマーカーで引いたような始点と終点が斜めになっているデザインのものはなかったため、今回は改行対応の蛍光ペン風マーカーの実装方法をご紹介します。

backgroundで背景色を設定するだけでなく、疑似要素のborderで白色の三角形をつくり強調表示したいテキストの前後に表示することで、マーカーの始点と終点を斜めにしています。
「translateX」で三角形の位置を微調整して完成です。

文字のサイズによっては調整が必要になりますが、このスニペットだと複数行あるテキストの中で使用しても、マーカーが自動的についてきてくれるので、レスポンシブでも活躍すると思います。

よければぜひ使ってみてください!