html5 css线段变长,鼠标经过线条变长、向四周延伸的css效果

效果如图所示：

嘿！八本那年~

.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更换成注释掉的那句试试看？