【コピペで使える】CSSでテキストにマーカー(テキストと重なる下線)を引く方法
記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか?
今ならポイント10倍
線がテキストの後ろに回りこむような形の表現がいいですよね。
下線と言えば、text-decarationのunderline(インライン属性)や、border-bottom(ブロック属性)を使うことが多いですが、これではなかなか実現できないのがこの表現です。
でも実装はかなり簡単です。
今回はこのマーカー風下線の実現の仕方を紹介したいと思います。
HTML
<h3 class="marker">テキスト</h3>
CSS
.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での中央寄せができなくなるため、中央寄せにしたい場合は、ひとつ外側にブロック属性を被せてその中でセンター寄せを行う必要が出てきます。
投稿者プロフィール
最新の投稿
コンテンツ2023.05.26なぜSCSSを使わないのか
コンテンツ2023.05.23【JQuery】appendで追加した要素でclickイベントが発火しないときの対処法
コンテンツ2023.05.19ホームページ制作会社に作業を依頼するときの注意点
Webサイト制作実績2023.05.16ウイングアーク1st株式会社様の情報メディア「データのじかん」のサイトリニューアルに協力させていただきました。