让div某一边的border（边框）显示一半

一、遇到问题

最近遇到一个新需求，让div的某一边的边框显示一半。

二、解决思路

给盒子加个div，使用position来实现。核心思想：把那个只显示一半的边框当成一个div。

三、解决过程

3.1、代码

<div class="tab">
    <div :class="pickTab == 0 ? 'tabPick_b' : 'tabPick_a'" @click="pickTab = 0">
        回答求助
        <div></div>
    </div>
    <div :class="pickTab == 1 ? 'tabPick_b' : 'tabPick_a'" @click="pickTab = 1">技术干货</div>
</div>

.tab {
    width: 100%;
    height: 4vh;
    border-bottom: 1px solid #F4F4F4;
    display: flex;
    div {
        width: 4.5vw;
        height: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    div:first-child {
        position: relative;
        div {
            position: absolute;
            top: 25%;
            left: 100%;                            
            width: 1px;
            height: 50%;
            background: #D8D8D8;
        }
    }
}

3.2、效果图