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;
}

 

效果如下图：

 

 

 ---------------------

作者：小小青柠檬

来源：CSDN 原文：https://blog.csdn.net/tanqiaoxing/article/details/80167564