← 動的パーツギャラリーへ戻る

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

アニメ付きパンくずリスト

CSSで描いた矢印区切りのパンくずリスト。ホバーで下線が伸びるアニメ付きで、WordPressの下層ページの現在地表示に使えます。

hovercss

プレビュー

ソースコード

HTML

<nav class="d03-01-07-bc" aria-label="パンくずリスト">
          <a href="#" onclick="return false">ホーム</a>
          <span class="d03-01-07-sep"></span>
          <a href="#" onclick="return false">サービス</a>
          <span class="d03-01-07-sep"></span>
          <a href="#" onclick="return false">Web制作</a>
          <span class="d03-01-07-sep"></span>
          <span class="d03-01-07-current">料金プラン</span>
        </nav>

CSS

.d03-01-07-bc{
          display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
          background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;
          padding:10px 20px;font-size:13px;
        }
        .d03-01-07-bc a{
          position:relative;color:#475569;text-decoration:none;font-weight:600;
          padding:2px 0;transition:color .25s ease;
        }
        .d03-01-07-bc a::after{
          content:"";position:absolute;left:0;bottom:-2px;
          width:100%;height:2px;background:#2563eb;border-radius:2px;
          transform:scaleX(0);transform-origin:left center;
          transition:transform .3s cubic-bezier(.4,0,.2,1);
        }
        .d03-01-07-bc a:hover{color:#2563eb}
        .d03-01-07-bc a:hover::after{transform:scaleX(1)}
        .d03-01-07-sep{
          width:7px;height:7px;flex:none;
          border-top:2px solid #94a3b8;border-right:2px solid #94a3b8;
          transform:rotate(45deg);
        }
        .d03-01-07-current{color:#0f172a;font-weight:700}

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