[CSS]様々な太さのマーカー・横長のマーカーを実装する

簡単なマーカーから少し手の込んだマーカーまで

文章を強調するとき、アナログでの蛍光ペン・マーカーペンのような表現ができたら助かります。

ここでは数行で実装できるものから、少し手を加えて文字よりも横長に伸びたマーカーを実装したいと思います。

See the Pen marker by nanase webdesigner (@nanase-777) on CodePen.

マーカーしたい箇所を<span></span>で囲み、cssでデザインを設定します。

マーカーの縦の長さを変更したい場合は次のlinear-gradientの%の値を、色を変更したい場合はカラーコードの部分を変更します。

background: linear-gradient(transparent 30%, #ffd700 30%);

1	background: linear-gradient(transparent 30%, #ffd700 30%);

もしマーカーの高さを更に高いものにしたい場合、cssに次の要素を追加します。

line-height: 2;
display: inline-block; // 変更が反映されない場合に追加

1 2	line-height: 2; display: inline-block; // 変更が反映されない場合に追加

lline-heightで文字の行間を高くすることで、マーカーも合わせて縦に伸びます。もし、lline-heightの設定が反映されない場合はdisplay:inline-block;を追加してください。

lline-height:2;の場合、文字フォントの大きさの2倍の行間となります。

See the Pen marker-wide by nanase webdesigner (@nanase-777) on CodePen.

テキストにposition:relative;を設定し、テキストに対して相対的な位置(position:absolute;)に擬似要素のマーカーを設置します。

横に更に伸ばしたい場合はleft、rightの値を希望の長さになるまで調整します。上下の位置を変えたい場合はbottomの値を変更します。

マーカーの高さを変えたい場合はheightの値を変更します。

テキストの横幅をベースにマーカーを追加するためp要素をinline-block要素へ変更しています。そのため、テキストが短いものが連続すると横並びになる可能性もあります。
横並びを避けたい場合は要素を一つずつdivのようなblock要素で囲んでおきます。

また逆にテキストが長いと直前で改行される場合もあります。（サンプル参照）
文字の途中にマーカーを挟む場合は上記のbackground要素を使う方が適しているので、こちらをお勧めします。擬似要素を用いたマーカーはタイトルや見出しなどの短文での表示に適しています。

以上でマーカーが表示されるようになりました。用途やデザインに合った実装方法で試してみてください。