span底部显示border一半

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

小小青柠檬

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

阅读量7.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/tanqiaoxing/article/details/80167564

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