パーツ番号 02-07-36 ・ CSSのみ

コロンラベル見出し

見出し末尾にコロンを添え、補足ラベルを下線付きで並べるスタイル。条件や補足情報を一言添えたい案内見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">送料について<span class="colon">:</span></h4>
          <span class="label">FREE SHIPPING</span>
        </div>

CSS

.d02-07-36 .wrap{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:center; }
        .d02-07-36 .ttl{ all:unset; font-size:21px; font-weight:800; color:#1f2937; }
        .d02-07-36 .colon{ color:#9ca3af; font-weight:400; margin-left:2px; }
        .d02-07-36 .label{ font-size:12px; font-weight:700; letter-spacing:.06em; color:#0ea5e9; border-bottom:2px solid #0ea5e9; padding-bottom:2px; }

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