パーツ番号 03-01-07 ・ CSSのみ
アニメ付きパンくずリスト
CSSで描いた矢印区切りのパンくずリスト。ホバーで下線が伸びるアニメ付きで、WordPressの下層ページの現在地表示に使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。