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

オーバーライン見出し

下線ではなく見出しの上に細い線を敷くスタイル。段落の冒頭で章の切り替わりを静かに示したいコラム見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">オーバーライン見出し</h4>
        </div>

CSS

.d02-10-28 .wrap{ text-align:center; }
        .d02-10-28 .ttl{ all:unset; display:inline-block; font-size:22px; font-weight:800; color:#1f2937; padding-top:14px; border-top:3px solid #6366f1; }

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