【コピペで使える】CSSでテキストにマーカー（テキストと重なる下線）を引く方法
たーさん記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか？
今ならポイント１０倍
線がテキストの後ろに回りこむような形の表現がいいですよね。
下線と言えば、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での中央寄せができなくなるため、中央寄せにしたい場合は、ひとつ外側にブロック属性を被せてその中でセンター寄せを行う必要が出てきます。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
