Hi Im trying to create a div with responsive circles connected by a line using css3.
Example of the what im trying to do http://codepen.io/bookcasey/pen/cEntL
In the above example i want to make it responsive such that the circle size doesnot change but if width increases i want first and last circles to be on left side and right side of the UL and other circles position in between at equal distances. circles can increase or decrease least is two circles and a line.
You could use the solution of Justify the last line of a div? in order to make it full width.
And fake the line with absolute positioned pseudo-elements.
ul {
text-align: justify;
position: relative;
overflow: hidden;
}
ul:before, .active:after {
content: '';
width: 100%;
border: 2px solid dodgerblue;
position: absolute;
top: 1em;
margin-top: -2px;
z-index: -1;
}
.active:after {
border-color: lightblue;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 50%;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
}
.active ~ li {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
I solved by using floats, before element as the circle and after as the connection:
li {
width: 14%;
text-align: center;
line-height: 2em;
float: left;
color: white;
position: relative;
}
li:before{
content: '';
position: absolute;
top: 0;
left: calc(50% - 1em);
width: 2em;
height: 2em;
border-radius: 1em;
background: dodgerblue;
z-index: -1;
}
li:after{
content: '';
position: absolute;
top: .9em;
left: calc(50% + 1em);
width: 100%;
height: .2em;
background: dodgerblue;
z-index: -1;
}
If you want to add a block of text underneath each number, I went ahead and did that as well! Check it out on CodePen
HTML
<ul>
<li><span class="marker-number">1</span> <span class="marker-text">Select Car</span></li>
<li class="active"><span class="marker-number">2</span> <span class="marker-text">Questions</span></li>
<li><span class="marker-number">3</span> <span class="marker-text">Problems</span></li>
<li><span class="marker-number">4</span> <span class="marker-text">Inspection</span></li>
<li><span class="marker-number">5</span> <span class="marker-text">Solution</span></li>
</ul>
CSS
ul {
text-align: justify;
position: relative;
overflow: hidden;
}
ul:before, .active:after {
content: '';
width: 100%;
border: 2px solid #21a2d1;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
}
.active:after {
border-color: #b7b7b7;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
margin: 0 1em;
display: inline-block;
color: white;
font-size: 1em;
}
.marker-number {
font-size: 14px;
}
li.active {
background: #04497b;
}
.active ~ li {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: 16px;
width: 70px;
display: block;
margin-left: -21px;
margin-top: 2px;
font-style: italic;
font-family: Arial;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.