<nav class="bc-08" aria-label="Breadcrumb">
  <ol class="bc-08__list">
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">01</span
      ><a class="bc-08__link" href="javascript:void(0)">Home</a>
    </li>
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">02</span
      ><a class="bc-08__link" href="javascript:void(0)">Articles</a>
    </li>
    <li class="bc-08__item bc-08__item--cur">
      <span class="bc-08__num bc-08__num--cur" aria-hidden="true">03</span
      ><a class="bc-08__link bc-08__link--cur" aria-current="page" href="javascript:void(0)"
        >Read</a
      >
    </li>
  </ol>
</nav>

.bc-08__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-08__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bc-08__item + .bc-08__item {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-08__num {
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.06em;
  transition:
    color 0.3s,
    font-size 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.bc-08__num--cur {
  color: #8b7fff;
  font-size: 14px;
}

.bc-08__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-08__link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.bc-08__link--cur {
  color: #fff;
  pointer-events: none;
}