Live Count Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-badge">
  <ol class="nuda-bc2-badge__list">
    <li class="nuda-bc2-badge__item">
      <a class="nuda-bc2-badge__link" href="#">Inbox</a>
      <span class="nuda-bc2-badge__count">12</span>
    </li>
    <li class="nuda-bc2-badge__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-badge__item">
      <a class="nuda-bc2-badge__link" href="#">Team</a>
      <span class="nuda-bc2-badge__count">3</span>
    </li>
    <li class="nuda-bc2-badge__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-badge__item">
      <span class="nuda-bc2-badge__link nuda-bc2-badge__link--cur" aria-current="page">Unread</span>
      <span class="nuda-bc2-badge__count nuda-bc2-badge__count--on">5</span>
    </li>
  </ol>
</nav>

.nuda-bc2-badge {
  width: 280px;
}

.nuda-bc2-badge__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .78rem;
  gap: .4rem;
}

.nuda-bc2-badge__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.nuda-bc2-badge__link {
  color: #999;
  text-decoration: none;
}

.nuda-bc2-badge__link:hover {
  color: #e4ff54;
}

.nuda-bc2-badge__link--cur {
  color: #fafafa;
  font-weight: 600;
}

.nuda-bc2-badge__sep {
  color: #444;
}

.nuda-bc2-badge__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .3rem;
  border-radius: 99px;
  background: #262626;
  color: #bbb;
  font-size: .62rem;
  font-weight: 700;
  animation: _nuda-bc2badgepop .4s cubic-bezier(.34,1.56,.64,1) both;
}

.nuda-bc2-badge__count--on {
  background: #e4ff54;
  color: #0a0a0a;
}

.nuda-bc2-badge__item:nth-child(1) .nuda-bc2-badge__count {
  animation-delay: 0s;
}

.nuda-bc2-badge__item:nth-child(3) .nuda-bc2-badge__count {
  animation-delay: .12s;
}

.nuda-bc2-badge__item:nth-child(5) .nuda-bc2-badge__count {
  animation-delay: .24s;
}

@keyframes _nuda-bc2badgepop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-badge__count {
    animation: none !important;
    transform: scale(1);
  }
}