パーツ番号 03-06-06 ・ CSSのみ

下線インジケーター型ページネーション

アクティブなページ番号の下に短い線を配置して現在地を示す形。タブに近い落ち着いた印象の一覧向けです。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-06-pager">
          <span class="d03-06-06-num">1</span>
          <span class="d03-06-06-num d03-06-06-active">2<i></i></span>
          <span class="d03-06-06-num">3</span>
          <span class="d03-06-06-num">4</span>
        </nav>

CSS

.d03-06-06-pager{display:flex;gap:20px;}
        .d03-06-06-num{
          position:relative;
          padding-bottom:8px;
          color:#9ca3af;font-size:15px;font-weight:600;
        }
        .d03-06-06-active{color:#111827;}
        .d03-06-06-active i{
          position:absolute;left:0;right:0;bottom:0;
          height:2px;background:#111827;
        }

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