span底部显示border一半

最新推荐文章于 2025-07-15 19:30:00 发布

原创最新推荐文章于 2025-07-15 19:30:00 发布 · 7.9k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

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