自定义bootstrap 4面包屑箭头效果

Question

我正在尝试修改 bootstrap 4 面包屑，而不是我希望/看起来像>分隔符，但一直到边缘就像在这张图片中一样

  

问题如何使我的面包屑在链接末尾显示完整箭头，如上图所示。

Codepen Demo

我的CSS

.breadcrumb {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    background-color: #f5f5f5 !important;
}

.breadcrumb::after {
    display: block;
    clear: both;
    content: "";
}

.breadcrumb-item {
    float: left;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    display: block;
    width: 0;
    height: 0;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
    border-left: 16px solid transparent;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
    text-decoration: underline;
}

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

.breadcrumb-item.active {
    color: #868e96;
}

HTML

<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data</li>
</ol>