JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="path">
  <ol class="path-list">
    <li class="path-list__item">
      <a href="/" class="path-list-link">ほーむ</a>
    </li>
    <li class="path-list__item">
      <a href="/vision/" class="path-list-link">びじょん</a>
    </li>
    <li class="path-list__item">
      <a href="/vision/for-staff/" class="path-list-link">しゃいんのために</a>
    </li>
  </ol>
</div>

CSS

/* 見た目わかりやすく */body{font-size:32px}a:hover {color: tomato} a:hover:after {content: '："' attr(href) '"'}

/*
パンくずナビでは一番最後のa要素の
マウスイベントを無効にする
*/
.path-list__item:last-child {
  pointer-events: none;
}