【コピペで使える】CSSでテキストにマーカー（テキストと重なる下線）を引く方法

tasan

記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか？

今ならポイント１０倍

線がテキストの後ろに回りこむような形の表現がいいですよね。

下線と言えば、text-decarationのunderline（インライン属性）や、border-bottom（ブロック属性）を使うことが多いですが、これではなかなか実現できないのがこの表現です。

でも実装はかなり簡単です。

今回はこのマーカー風下線の実現の仕方を紹介したいと思います。

HTML

<h3 class="marker">テキスト</h3>

.marker {
background:linear-gradient(to top, yellow 0% 50%, rgba(0,0,0,0) 50% 100%);
display:inline-block;
}

今回は文中ではなく、見出しなどで使用するケースを想定しての実装をしました。

h3タグはブロック属性のため、そのままbackgroundを設定するとテキストの長さ分ぴったりとマーカーをつけることができません。

そのため、markerクラスでは一緒にdisplay:inline-block;を設定して、インライン属性に変更しています。

これによってテキストの横幅ぴったりにマーカーをつけることができます。

ただ、インライン属性にするとtext-alignでの中央寄せができなくなるため、中央寄せにしたい場合は、ひとつ外側にブロック属性を被せてその中でセンター寄せを行う必要が出てきます。

Follow me!