Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav id="tbx-1037" class="tbx-1037" aria-label="パンくずリスト">
<ol><li><a href="#tbx-1037">Home</a></li><li><a href="#tbx-1037">Services</a></li><li><span aria-current="page">Consulting</span></li></ol>
</nav>
CSS
.tbx-1037{width:min(285px,100%);font:600 12px/1.4 system-ui,sans-serif}
.tbx-1037 ol{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0}
.tbx-1037 li{display:flex;align-items:center;gap:6px}
.tbx-1037 li+li:before{content:"/";color:#adb5c4}
.tbx-1037 a,.tbx-1037 span{display:inline-block;position:relative;padding:9px 5px;color:#627389;text-decoration:none;transition:color .23s}
.tbx-1037 a:after{content:"";position:absolute;inset:auto 5px 4px;height:2px;background:#c27b46;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.tbx-1037 a:is(:hover,:focus-visible){color:#183957}
.tbx-1037 a:is(:hover,:focus-visible):after{transform:scaleX(1)}
.tbx-1037 [aria-current=page]{color:#182e42;font-weight:800}
.tbx-1037 a:focus-visible{outline:2px solid #567f9e;outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.tbx-1037 a,.tbx-1037 a:after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
多階層の企業サイト・商品カテゴリーページ
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。