как работает стиль начальной загрузки 4 при наведении мыши

Question

Я не знаю, как работает эта хлебная крошка, потому что она имеет две одинаковые строки ... Я читал, что css возьмет последнюю, но когда я наведу курсор мыши, она берет первую

.breadcrumbpers-item + .breadcrumbpers-item:hover::before {
  text-decoration: underline; /*this apply to text*/
  color: #F70B27;  /*this applies to ">"*/
  border-bottom: 1px solid #d4a947;  /*this applies to ">"*/
}  

, а также этот код добавляет цвет к элементу ">", а не к тексту.То же самое происходит с border-bottom: 1px solid #d4a947; Я хочу, чтобы место текста имело этот характер, но оно добавляет нижнюю границу к месту ">"

Вот HTML

<nav aria-label="breadcrumbpers">
      <ol class="breadcrumbpers">
        <li class="breadcrumbpers-item"><a class="white-text" href="#">Home</a></li>
        <li class="breadcrumbpers-item"><a class="white-text" href="#">Library</a></li>
        <li class="breadcrumbpers-item active" aria-current="page">Evidencias | no aprobadas</li>
      </ol>
    </nav>

CSS.Я взял тот же CSS из начальной загрузки и изменил имя, чтобы поставить его на свой собственный CSS

.breadcrumbpers {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #253e85;
  border-radius: 0.25rem;
}

.breadcrumbpers-item + .breadcrumbpers-item {
  padding-left: 0.5rem;
}

.breadcrumbpers-item + .breadcrumbpers-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #FFFFFF;
  content: ">";
}

.breadcrumbpers-item + .breadcrumbpers-item:hover::before {
  text-decoration: underline;
  color: #F70B27;
  border-bottom: 1px solid #d4a947;
}

.breadcrumbpers-item + .breadcrumbpers-item:hover::before {
  text-decoration: none;
}

.breadcrumbpers-item.active {
  color: #FFFFFF;
  border-bottom: 1px solid #d4a947
}

a.white-text{
   color: #FFFFFF;
}