我有一个ul，我将它用于我的breadcrumbs组件，以制作如下所示的选项卡（白色块的文本样式将有所不同）：

我试图创建这个标签倾斜结束使用css样式的li:after。

.breadcrumb-container {
    background: blue;
    font-family: var(--font-family-semibold);
}

ul {
    padding: 0;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;

    li {
        list-style: none;
        display: inline-block;
        text-transform: uppercase;
        padding: 10px 20px;

        a {
            text-decoration: none;
            color: white;
            font-size: 14px;
            line-height: 17px;
            font-family: var(--font-family-semibold);
        }
    }
}

ul.tabs>li {
    float: right;
    padding-right: 60px;
    padding-top: 11px;
    padding-left: 40px;
    height: 56px;
    background: darkblue;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    max-width: 222px;
    box-sizing: border-box;
    border: 1px solid #10172E;
}

ul.tabs>li>a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: $alis-white;
}

li:after {
    content: '';
    position: relative;
    width: 10%;
    height: 100%;
    bottom: 33px;
    left: 90px;
    border-right: 30px solid transparent;
    border-bottom: 56px solid green;
}

<div class="breadcrumb-container">
    <ul class="tabs">
        <li class="tab"><mat-icon>search</mat-icon></li>
        <li class="tab1"><a href="javascript:void(0)">Different size Tab</a></li>
        <li class="tab2"><a href="javascript:void(0)">Tab 2</a></li>
        
    </ul>

</div>

我的代码如下所示：

*绿色Triangles是li:after样式切片，我尝试将其连接到每个选项卡的末尾。

• 我在li:after中使用left: 90px;，但这不是动态的，会根据选项卡中文本的长度而改变。

如何将此li:after样式 * 动态 * 连接到选项卡末尾？