纯css 竖向步骤条

一、平常做一些物流啊提现啊这些效果的时候可能就需要用到步骤来向用户展示具体到哪一步了，但是呢有时候写的又比较繁琐，找各种组件插件又要安装或者引入对应的包，今天就给大家分享一个纯css的竖向步骤条，先看效果图：

二、废话不多说，直接上代码，HTML：

<div class="stepItem" v-for="(item,index) in billList.handle" :key="index">
    <van-icon name="passed" size=".45rem" color="#07c160" ></van-icon>
	<div class="stepBox">
		<span>{{item.name}}</span>
		<span>{{item.time}}</span>
	</div>
</div>

 三、CSS

.stepItem{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding-bottom: 0.5rem;
}
.stepItem:not(:last-of-type):after{
	content: "";
	font-size: 0;
	height: 65%;
	width: 0.05rem;
	background: #07c160;
	position: absolute;
	left: 0.2rem;
	top: 0.48rem;
}
.stepBox{
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.34375rem;
	color: #07c160;
}

四、如果复制粘贴出现排版错乱问题，请把rem换成px，在伪类里面微调left和top的值，以上就是本次的分享，希望大家物喜勿喷，谢谢！有用了vantUI库的图标。