css实现标签的边框显示一半

2022年8月17日 104次阅读 来源: 学web的碎碎

项目中遇到边框显示一半这个问题，现在就一起来看一下。

下方是我用小程序项目为例演示的，具体情况还是看项目的需求来调整。

//  
<view id="{
  {item.order_status}}" class="weui-navbar__item {
  {activeIndex == item.order_status ? 'weui-bar__item_on' : ''}}" >
        <view class = "weui-navbar__title">我的智能</view>
        <view class = "weui-navbar__title">日志</view>
</view>


// 
.weui-bar__item_on:after {
     position: absolute; 
     width: 100rpx;      // 边框的宽度
     height: 4rpx;
     left: 37%;            //距离 view 标签的距离
     bottom: 0; 
     background-color: #00C09C;     //  颜色
}

下方为效果图：

《css实现标签的边框显示一半》

    原文作者：学web的碎碎
    原文地址: https://blog.csdn.net/weixin_42695298/article/details/88373719
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞