Sliding Highlight Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-slide">
  <ol class="nuda-bc2-slide__list">
    <li class="nuda-bc2-slide__item"><a class="nuda-bc2-slide__link" href="#">Home</a></li>
    <li class="nuda-bc2-slide__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-slide__item"><a class="nuda-bc2-slide__link" href="#">Library</a></li>
    <li class="nuda-bc2-slide__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-slide__item"><span class="nuda-bc2-slide__link nuda-bc2-slide__link--cur" aria-current="page">Data</span></li>
  </ol>
  <span class="nuda-bc2-slide__highlight" aria-hidden="true"></span>
</nav>

.nuda-bc2-slide {
  position: relative;
  width: 260px;
}

.nuda-bc2-slide__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-bc2-slide__item {
  width: 76px;
  text-align: center;
}

.nuda-bc2-slide__sep {
  width: 20px;
  text-align: center;
  color: #444;
}

.nuda-bc2-slide__link {
  color: #999;
  text-decoration: none;
  transition: color .15s;
}

.nuda-bc2-slide__link:hover {
  color: #fafafa;
}

.nuda-bc2-slide__link--cur {
  color: #fafafa;
  font-weight: 700;
}

.nuda-bc2-slide__highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 76px;
  height: 2px;
  background: #e4ff54;
  box-shadow: 0 0 8px rgba(228,255,84,.7);
  transform: translateX(192px);
  animation: _nuda-bc2slide 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes _nuda-bc2slide {
  0%,20% {
    transform: translateX(0);
  }
  35%,50% {
    transform: translateX(96px);
  }
  65%,100% {
    transform: translateX(192px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-slide__highlight {
    animation: none !important;
    transform: translateX(192px);
  }
}