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

下線+アクセントドット見出し

見出し下に短いアクセント線と丸ドットを添えたシンプルな装飾。お知らせ欄やブログ一覧の小見出しに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">お知らせ一覧</h4>
          <div class="deco"><span class="line"></span><span class="dot"></span></div>
        </div>

CSS

.d02-07-03 .wrap{ text-align:center; }
        .d02-07-03 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1f2937; margin-bottom:10px; }
        .d02-07-03 .deco{ display:flex; align-items:center; justify-content:center; gap:6px; }
        .d02-07-03 .line{ width:36px; height:3px; background:#f59e0b; border-radius:2px; }
        .d02-07-03 .dot{ width:6px; height:6px; border-radius:50%; background:#f59e0b; }

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