브레드크럼

<nav aria-label="breadcrumb" class="bc">
  <ol id="bcl">
    <li><a href="#">홈</a></li>
    <li><a href="#">도서</a></li>
    <li><a href="#">소설</a></li>
    <li aria-current="page">82년생 김지영</li>
  </ol>
</nav>

.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;font-size:12px;max-width:min(280px,90%)}
.bc li{display:flex;align-items:center;color:var(--muted);opacity:.25;transition:opacity .3s}
.bc li[data-lit]{opacity:1}
.bc li:not(:first-child)::before{content:"›";margin:0 6px;color:var(--line)}
.bc a{color:var(--muted);text-decoration:none}
.bc li[aria-current] {color:var(--fg);font-weight:600}

const items = [...document.querySelectorAll('.bc li')];
let n = 1;
function paint() { items.forEach((li, i) => li.toggleAttribute('data-lit', i < n)); }
paint();
setInterval(() => { n = n >= items.length ? 1 : n + 1; paint(); }, 900);