Javascript 强大的表单CSS进度条

我正在使用强大的表单，并试图创建一个像[本网站][1]所拥有的表单。 我有进度条和步骤编号。如何在进度条中显示这些数字

另外，我希望这个进度条像[这个网站][1]一样位于底部

您可以在这里找到完整的代码=>

以下是我目前为止的CSS：

/*主窗体*/
.具有\u frm\u样式。frm\u表单\u字段>字段集{
边界半径：7px；
盒影：0.20px-1pxRGBA（0,0,0,0.4）；
}
.frm_组合输入_容器、.frm_网格_容器、.frm_表单_字段、frm_节标题、.frm_表单_字段、frm_字段_容器{
最小高度：300px；
}
/*进度条*/
.frm_根线_组{
利润率：0.0-31px0；
顺序：2；
}
.frm_根线_单个输入：悬停{
背景色：#57970d；
}
.frm\u style\u-style.with\u frm\u style.frm\u page\u bar.frm\u current\u page输入[type=“button”]{
背景：线性梯度（至底部，#90c81e，#57970d）；
}
.frm_style_-style.with_frm_style.frm_progress_line input.frm_page_back{
背景：线性梯度（至底部，#90c81e，#57970d）；
}
.frm\u根线\u单个输入[type=“button”]：悬停{
背景色：#57970d；
背景图像：线性渐变（至底部，#90c81e，#57970d）！重要；
}
.frm_style_-style.with_frm_style.frm_progress_line.frm_show_line输入{
左边框颜色：#ffffff；
右边框颜色：#ffffff；
}
div#frm_表单_2_容器li.frm_根线_单个输入{
高度：23px；
盒影：0 2px4p0 rgba（0,0,0,0.5）；
}
/*图像选项*/
.frm\u style\u-style.with\u frm\u style.frm\u page\u bar.frm\u current\u page输入[type=“button”]{
背景色：#57970d；
}
.frm_图像_选项{
文本对齐：居中；
}
.frm_image_options.frm_image_option_container.frm_empty_url.frm_image_options.frm_image_option_container img{
对象匹配：包含；
}
.带有\u frm\u样式。垂直\u收音机。frm\u复选框标签，.带有\u frm\u样式。垂直\u收音机。frm\u收音机标签{
左侧填充：0；
文本缩进：0；
}
.frm\u图像\u选项.frm\u图像\u选项\u容器{
边框：2个实心#f9f9ec；
背景色：#f9f9ec；
光标：指针；
}
.frm\u图像\u选项。frm\u图像\u选项\u容器：悬停{
盒影：0.06px-1pxRGBA（0,0,0,0.4）；
}
/*无线电选项*/
.radiopt.frm_opt_容器.frm_收音机{
背景：#f9f9ec；
填充：10px；
利润率：0.15px；
光标：指针；
}
.frm_form_field.frm_two_col.frm_field.frm_two_col.frm_field.frm_three_col.frm_radio.frm_form_field.frm_three_col.frm_checkbox.frm_form_field.frm_four col.frm_radio.frm_四col.frm_checkbox.frm_{
/*利润率：0.10px*/
}
.frm_无线电标签{
显示：块！重要；
光标：指针；
}
.frm_无线电输入[类型=无线电]{
光标：指针；
}
/*钮扣*/
.frm_页面\u数量\u 1.frm_提交。frm_按钮\u提交{
宽度：100%！重要；
}
.frm\u上一页{
宽度：25%！重要；
}
.frm_image_options.frm_image_option_container.frm_empty_url.frm_image_options.frm_image_option_container img{
高度：100px！重要；
}

我已经算出了进度条的底部，但我仍然不知道如何在进度条中显示这些数字。。任何人