span底部显示border一半

1、html

< div >

< span class= "status-all status-active status-normal" >全部 </ span >

< span class= "status-other status-normal" >待确认 </ span >

< span class= "status-other status-normal" >已成功 </ span >

</ div >

2、css

.status-all.status-active:after {

content: '';

position: absolute;

width: 16px;

height: 2px;

left: 25%;

bottom: 0;

background-color: #4572ED;

}

.status-other.status-active:after {

content: '';

position: absolute;

left: 25%;

bottom: 0;

height: 2px;

width: 24px;

background-color: #4572ED;

}

效果如下图：