パーツ番号 02-10-01 ・ CSSのみ

蛍光マーカー風見出し

文字の下半分に蛍光マーカーで引いたような帯を重ねる装飾。ブログ記事内の重要キーワードやお知らせ見出しの強調に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl"><span class="mark">ハイライト見出し</span>テキスト</h4>
        </div>

CSS

.d02-10-01 .wrap{ text-align:center; }
        .d02-10-01 .ttl{ all:unset; display:block; font-size:24px; font-weight:800; color:#1f2937; line-height:1.7; }
        .d02-10-01 .mark{ background:linear-gradient(180deg, transparent 58%, #fde68a 58%); padding:0 4px; }

クラス名 .d02-10-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。