Question

46

Css3 responsive circles connected by a line?

rated 0 times [ 52] [ 6] / answers: 1 / hits: 6429 / 10 Years ago, wed, march 19, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

answered 10 Years ago dusty · Accepted Answer

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;

}