html怎么实现圆点,css实现步骤条如何让两边的圆点样式不一样

两个进度条 如何让前后两个圆点样式不一样

例如这样

ul {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

.pub-wrap {

position: relative;

padding: 0 30px 10px;

margin-top: 28px;

border-radius: 6px;

}

.pub-process {

position: relative;

height: 10px;

margin-top: 28px;

margin-left: 10px;

font-size: 0;

color: #fff;

}

.pub-process:after {

position: absolute;

top: 50%;

left: 0;

z-index: 1;

width: 99%;

height: 4px;

content: "";

-webkit-transform: translate(0, -50%);

transform: translate(0, -50%);

background-color: #d9d9d9;

}

.pub-process li {

position: relative;

z-index: 5;

display: inline-block;

width: 25%;

height: 35px;

font-size: .875rem;

}

.pub-process li:first-child {

width: 35px;

margin-left: -35px;

}

.pub-process .ball {

position: absolute;

top: 0;

right: 0;

z-index: 7;

width: 10px;

height: 10px;

line-height: 10px;

content: "";

text-align: center;

border-radius: 50%;

background-color: #d9d9d9;

}

.pub-process .active .ball {

background-color: #1890ff;

}

.pub-process .active+.active:after {

position: absolute;

top: 15%;

left: 0;

z-index: 6;

width: 100%;

height: 4px;

content: "";

-webkit-transform: translate(0, -50%);

transform: translate(0, -50%);

background-color:#1890ff;

}

.process-3 li {

width: 50%;

}

.process-5 li {

width: 25%;

}

/* flex ver */

.pub-process-flex {

display: -webkit-box;

}

.pub-process-flex li {

display: list-item;

-webkit-box-flex: 1;

width: auto;

}

.pub-process-flex li:first-child {

width: 35px;

margin-left: -35px;

-webkit-box-flex: 0;

}

.active {

height: auto;

position: relative;

}

.text {

position: absolute;

color: #000;

top: 40px;

right: -34px;

width: 100px;

text-align: center;

}

• 任务审核
• 备航准备
• 外业
• 内业
• 内业分析
• 归档