前端 使用::before后如何保持原来的文本居中

需求: 一个父元素下面固定显示一个文本元素,但是该文本元素又需要动态添加一个左边框

first

//设置了::before ,父元素是text-align:center,
//可以做到水平对齐但是无法垂直对齐,而且动态添加::before时文本会动

second

//父元素设置flex;justy-content:flex-start;
//文本会动,不美观

end

//父级元素恒有::before和::after
//动态添加::before才设置宽

.left-item {
				height: 100rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				&::before {
					content: '';
					width: 0rpx;
					height: 100%;
					display: block;
					
				}
				&::after {
					content: '';
					width: 0rpx;
					height: 100%;
					display: block;
					
				}
				

				&.active {
					background-color: lightpink;
					&::before {
						content: '';
						width: 5rpx;
						height: 100%;
						display: block;
						background-color: black;
						
					}
				}
			}