css实现导航栏底部横线从中间向两边展开和收起

展开
    &::before {
                transition: all .4s;
                content: '';
                position: absolute;
                width: 100%;
                height: 4rpx;
                border-radius: 30rpx;
                background: #FA4319;
                bottom: -10rpx;
                left: 50%;
                transform: translate(-50%);
            }

收起
            &::before {
                transition: all .4s;
                content: '';
                position: absolute;
                width: 0;
                height: 4rpx;
                border-radius: 30rpx;
                bottom: -10rpx;
                left: 50%;
                transform: translate(-50%);
            }

需要给定一个盒子作为伪类的定位参照物。