Css3 responsive circles connected by a line?

Question

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.

no Minimum two circles and a line with there, each circle at two ends of the line, maximum 5 cirlces — thechoosenone, Mar 19 '14 at 17:42

score 5 · Accepted Answer · edited May 23 '17 at 11:44

5

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.

Demo

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;
}

edited May 23 '17 at 11:44

Community

1
1

answered Mar 19 '14 at 17:53

Oriol

274,082
63
437
513

Thank you so much @Oriol, Can you help me in one small thing in the above example, a small part of line is coming out of first circle and last circle, can we also keep it inside so that it looks like line start after circle and ends before last circle. – thechoosenone Mar 19 '14 at 18:08
@thechoosenone Not at all :) Just remove `li { margin: 0 1em; }`. [**Demo**](http://codepen.io/anon/pen/kpEyw/). – Oriol Mar 19 '14 at 18:09
tried it but after the last circle a part of line is coming out in the right hand side. – thechoosenone Mar 19 '14 at 18:13
im using Safari on Mac. – thechoosenone Mar 19 '14 at 18:21
@thechoosenone You can fix it commenting the spaces between `
` elements, or using `font-size: 0` to `
- `s. [**Demo**](http://codepen.io/anon/pen/KifyB/)

Oriol

Mar 19 '14 at 18:36

score 1 · Answer 2 · answered Jun 05 '15 at 15:12

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

enter image description here

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;
}

I want the same thing in vertical format. The first column can be the name and the second column should be the stepper. Please tell me what needs to add/change. Thanks. — Aniket kale, Apr 13 '21 at 10:49

score 0 · Answer 3 · answered Mar 19 '14 at 18:06

I solved by using floats, before element as the circle and after as the connection:

SOLUTION

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;
}

Css3 responsive circles connected by a line?

3 Answers3

Linked