如何在两个选项卡之间添加垂直线？

Question

选项卡之间需要垂直线 (|)。

<p-tabView>
    <p-tabPanel header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
</p-tabView> 

我需要如下输出，

在角度 18 中使用 PrimeNG

Answer 1

您可以使用

::after

伪选择器将分隔线放置在

li

标签的右侧和顶部（将其设置为

position: relative

）。然后我们将需要的高度和宽度设置为

1px

，然后根据我们的要求定位。

.custom-divider {
    ul.p-tabview-nav > li:not(.p-tabview-ink-bar) {
        position: relative;
        &::after {
        content: '';
        height: 20px;
        width: 1px;
        background-color: black;
        position: absolute;
        right: 0px;
        top: 15px;
        }
    }
}

Stackblitz 演示