小程序scroll-view滚动条

做出上图效果，点击的时候下方出现线条。

<view class="top-classify">
    <view class="scrow-view">
        <scroll-view scroll-x="true" >
            <view class="fenlei-menu">
                <text bindtap="selectmenu" class="teamnum {{menuTop == item.courseId ?'thismenu com_color com_after':''}}" data-key="{{item}}" wx:for="{{course_list}}"wx:key='index' >{{item.courseName}} </text>
            </view>
        </scroll-view>
    </view>
     <!-- <view wx:if="{{ true }}" style="font-size:18rpx;" class="scrow-view">请点击右侧添加图表</view> -->
    <view class="imgs" bindtap="addStory">
        <image mode="widthFix" class="jiaimg " src="https://minproimg.oss-cn-hangzhou.aliyuncs.com/images/jiahao.png"></image>
    </view>
</view>

css:

.fenlei-menu text {
    display: inline-block;
    margin: 0 24rpx;
    position: relative;
    height: 64rpx;
    font-family:PingFang SC;
}

.fenlei-menu .thismenu {
    color: #1bcc14;
    font-weight: 500;
    font-family:PingFang SC;
}
.teamnum{
    font-size: 32rpx;
}
/* 利用伪类加下面的线条 */
.fenlei-menu .thismenu::after {
    content: '';
    display: inline-block;
    width:80%;
    height: 4rpx;
    border-radius: 6rpx;
    background: #1bcc14;
    position: absolute;
    bottom: 0rpx;
    left:46%;
    transform: translateX(-50%);
}
.top-classify {
    overflow: hidden;
    white-space: nowrap;
    background:rgba(255,255,255,1);
    color: #666;
    padding-top: 16rpx ;
    /* border-top: 1px solid #eee; */
    border-bottom: 1px solid #eee;
    width: 100%;
    z-index: 100;
    margin-bottom: -1px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.scrow-view{
    width: 90%;
}
.imgs{
    width:34rpx;
    height: 34rpx;
    margin-right:25rpx ;
    position: relative;
    top: 5rpx;
}
.imgs::before{
    content:"";
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top:-10px;
    left:-10px;
    bottom:-10px;
    right:-10px;
    }
.jiaimg{
    width: 100% !important;
    height: 100% !important;
}