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

点線下線見出し

見出し下に太めのドット下線を敷いたシンプルな装飾。ブログ一覧やお知らせページの小見出しに軽やかなアクセントを添えられる。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d02-10-13 .wrap{ text-align:center; }
        .d02-10-13 .ttl{ all:unset; display:inline-block; font-size:23px; font-weight:800; color:#1f2937; padding-bottom:14px; border-bottom:4px dotted #0ea5e9; }

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