【报Bug】view的::after 和::before不生效

示例代码：

<template>  
    <view class="tab-list-container">  
        <!-- 顶部 -->  
        <view class="tab-list">  
            <view @click="changeTab(1)" class="tab-item" :class='activeTab === 1 ? "active" : ""'>人气排行榜</view>  
            <view @click="changeTab(2)" class="tab-item" :class='activeTab === 2 ? "active" : ""'>为你找机</view>  
        </view>  
        <!-- 内容 -->  
        <view class="tab-content">  
            <view class="tab-1" v-show='activeTab === 1'>  
                <view>每天06：00更新</view>  
                <view v-for='(item, index ) in  tabGoodsList' :key='index'>  
                    <view class="goods-pic"></view>  
                    <view>挖机产品名称型号型号型号型号型号型号</view>  
                    <view class="info">  
                        <view>2013年</view>  
                        <view class="price">28.8万</view>  
                    </view>  
                </view>  
            </view>  

            <view class="tab-2" v-show='activeTab === 2'>  

            </view>  

        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref  
    } from 'vue'  

    const tabGoodsList = ref([])  
    const activeTab = ref(1)  

    const changeTab = (value) => {  
        activeTab.value = value  
    }  
</script>  

<style lang="scss" scoped>  
    .tab-list-container {  
        background-color: #fff;  
        margin: 24rpx 0;  
        padding-left: 24rpx;  
        padding-right: 24rpx;  
    }  

    .tab-list {  
        display: flex;  
        font-size: 26rpx;  
        color: #004;  
        column-gap: 24rpx;  

        .tab-item {  
            position: relative;  
            padding-bottom: 20rpx;  
        }  

    }  
    // 这里没有生效  
    .tab-item ::after {  
        position: absolute;  
        left: 0;  
        bottom: 0;  
        background-color: red;  
        height: 4rpx;  
        width: 100%;  
    }  
</style>

操作步骤：

创建一个页面，直接运行上面的代码，审查元素即可

预期结果：

期望有伪元素出现

实际结果：

实际没有。