css實現標簽的邊框顯示一半

項目中遇到邊框顯示一半這個問題，現在就一起來看一下。
下方是我用小程序項目為例演示的，具體情況還是看項目的需求來調整。

//
<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; // 顏色
}

下方為效果圖：