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

ドットリーダー目次見出し

見出し文字の後ろに点線のドットリーダーが伸び、右端にページ番号などの補足を添える目次風スタイル。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="label">サービス一覧</span>
          <span class="leader"></span>
          <span class="note">P.04</span>
        </div>

CSS

.d02-07-14 .wrap{ display:flex; align-items:baseline; gap:10px; width:100%; }
        .d02-07-14 .label{ font-size:18px; font-weight:800; color:#1f2937; white-space:nowrap; }
        .d02-07-14 .leader{ flex:1; border-bottom:2px dotted #9ca3af; height:1px; align-self:center; }
        .d02-07-14 .note{ font-size:12px; color:#6b7280; white-space:nowrap; font-weight:600; }

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