knutsford01
New Coder
I have this CSS
And this <div>
<div class="responsive-circle2"><i class="circle1"></i><i class="circle2"></i><i class="circle3"></i><i class="circle4"></i></div>
How do I get the line between the first two red circles red instead of #CCCCCC?
Please.
Thanks
CSS:
.responsive-circle2 {
height: 2px;
background-color: #CCCCCC;
overflow: visible;
position: relative;
}
.responsive-circle2::before,
.responsive-circle2::after,
.responsive-circle2 > i {
background: #FF0000;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #FF0000;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle2 > .circle3 {
right: 0;
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #CCCCCC;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle2 > .circle1 {
left: 33%;
left: calc(33% - 9px);
background: #FF0000;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #FF0000;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle2 > .circle2 {
left: 66%;
left: calc(66% - 9px);
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #CCCCCC;
position: absolute;
content: "";
top: -7px;
}
And this <div>
<div class="responsive-circle2"><i class="circle1"></i><i class="circle2"></i><i class="circle3"></i><i class="circle4"></i></div>
How do I get the line between the first two red circles red instead of #CCCCCC?
Please.
Thanks
Last edited by a moderator: