效果如图所示：

<div class="tab">
  嘿！八本那年~
  <div class="tab-class-fir"></div>
  <div class="tab-class-sec"></div>
</div>

.tab{
    display: inline-block;
    padding: 0 15px;
    line-height: 35px;
    cursor: pointer;
    transition: all 0.23s;
    position: relative;
}

.tab:before,
.tab:after,
.tab-class-fir,
.tab-class-sec {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.23s;
}

.tab:hover {
    color: #fff;
    background-color: #a29bfe;
}

.tab:before {
    border-top: 1px solid #000;
}

.tab:after {
    border-bottom: 1px solid #000;
}

.tab-class-fir {
    border-left: 1px solid #000;
}

.tab-class-sec {
    border-right: 1px solid #000;
}

.tab:hover:before {
    width: calc(100% + 10px);
    left: -10px;
    /* left: -5px; */
}

.tab:hover:after {
    width: calc(100% + 10px);
    left: 0;
    /* left: -5px; */
}

.tab:hover > .tab-class-fir {
    height: calc(100% + 10px);
    top: 0;
    /* top: -5px; */
}

.tab:hover > .tab-class-sec {
    height: calc(100% + 10px);
    top: -10px;
    /* top: -5px; */
}

上方css代码有四句hover，把他们的top或left更换成注释掉的那句试试看？