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

二重下線見出し

見出し下に太さの異なる2本の下線を重ねて配置するスタイル。案内ページや料金表の章見出しに落ち着いた印象を与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">サービス案内</h4>
        </div>

CSS

.d02-10-02 .wrap{ text-align:center; }
        .d02-10-02 .ttl{ all:unset; position:relative; display:inline-block; font-size:24px; font-weight:800; color:#1f2937; padding-bottom:16px; }
        .d02-10-02 .ttl::before{ content:""; position:absolute; left:0; bottom:7px; width:100%; height:3px; background:#1f2937; }
        .d02-10-02 .ttl::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#9ca3af; }

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