Перед вами практически готовые стрелки. Осталось только убрать вспомогательные фоны и рамки.

Для начала избавимся от вспомогательных outline у ссылок.

Затем, чтобы стрелки слились со ссылками, изменим цвет фона у ::after с красного на белый.

А потом изменим цвет тени псевдоэлементов, чтобы контур стрелок не был таким резким и сливался с тенью контейнера.

Напоследок зададим внешний вид ссылок и стрелок при наведении и в активном состоянии. Для этого зададим фон сразу для нескольких селекторов:

.breadcrumbs a:hover,
.breadcrumbs a:hover::after,
.breadcrumbs a.active,
.breadcrumbs a.active::after {
  ...
}

Это нужно для того, чтобы и ссылка, и её псевдоэлемент меняли фон одновременно и визуально оставались одним целым.