Javascript 如何设置垂直css步骤栏的样式，如图所示？

我已经用css（垂直下降的基本列表）创建了一个相当简单的垂直步骤组件，我想知道如何使用样式使它看起来像下图

*，
*：之后，
*：之前{
保证金：0；
填充：0；
}
身体{
填充：15px；
字体系列：Helvetica，无衬线；
}
输入[type=“button”]{
边缘顶部：20px；
}
.节点{
高度：10px；
宽度：10px；
边界半径：50%；
显示：内联块；
过渡：所有1000毫秒都容易；
}
.激活{
盒影：0px 0px 3px 2px rgba（194255194,0.8）；
}
.分隔器{
高度：40px；
宽度：2倍；
左边距：4倍；
过渡：所有800ms缓解；
}
李平{
显示：内联块；
左边距：25px；
}
李{
列表样式：无；
线高：1px；
}
蓝先生{
背景色：rgba（82、165、255、1）；
}
格林先生{
背景色：rgba（92184921）
}
瑞德先生{
背景色：rgba（255、148、148、1）；
}
格雷先生{
背景色：rgba（201、201、201、1）；
}

第一件事





第二件事





第三件事





第四件事





最后一件事