Creating CSS3 Circles connected by lines

Question

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look li

Answer 1

CSS3 only, Flex, Responsive, Dynamic, Customisable

Ok... I went a bit overboard - here it is.

(Tested and working on Chrome, Firefox, Safari - as of July 2020)

/* custom stylings */
:root {
  --active-bg-color: #1975CF;
  --active-text-color: white;
  --inactive-bg-color: #C4DDF4;
  --inactive-text-color: #3480D2;
  --line-width: 5%;
  --active-circle-diam: 30px;
  --inactive-circle-diam: 20px;
}
ul {
  font-family: Arial;
  border: 1px solid magenta;
}


/* --- breadcrumb component --- */
ul {
  position:relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
   padding: 0;
}
li:only-child {
  margin: auto;
}

/* lines */
li:not(:last-child):after {
  content: '';
  position: absolute;
  top: calc((100% - var(--line-width)) / 2);
  height: var(--line-width);
  z-index: -1;
}
/* circles */
li {
  overflow: hidden;
  text-align:center;
  border-radius: 50%;
  text-indent: 0;
  list-style-type: none;
}

/* active styling */
li,
li:not(:last-child):after {
  background: var(--active-bg-color);
  color: var(--active-text-color);
}

/* inactive styling */
li.active:after,
li.active ~ li,
li.active ~ li:not(:last-child):after {
  background: var(--inactive-bg-color);
  color: var(--inactive-text-color);
}

/* circle sizing */
li.active {
  width: var(--active-circle-diam);
  height: var(--active-circle-diam);
  line-height: calc(var(--active-circle-diam) + 0.1rem);
  font-size: calc(var(--active-circle-diam) / 1.6);
}
li:not(.active) {
  width: var(--inactive-circle-diam);
  height: var(--inactive-circle-diam);
  line-height: calc(var(--inactive-circle-diam) + 0.1rem);
  font-size: calc(var(--inactive-circle-diam) / 1.6);
}

/* 
Calculate ddynamic width using css3 only.
N.B. if you know the total count, hardcode away!
*/

li:first-child:nth-last-child(2):not(:last-child):after,
li:first-child:nth-last-child(2) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 1);
}
li:first-child:nth-last-child(3):not(:last-child):after,
li:first-child:nth-last-child(3) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 2);
}
li:first-child:nth-last-child(4):not(:last-child):after,
li:first-child:nth-last-child(4) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 3);
}
li:first-child:nth-last-child(5):not(:last-child):after,
li:first-child:nth-last-child(5) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 4);
}
li:first-child:nth-last-child(6):not(:last-child):after,
li:first-child:nth-last-child(6) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 5);
}
li:first-child:nth-last-child(7):not(:last-child):after,
li:first-child:nth-last-child(7) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 6);
}

li:first-child:nth-last-child(8):not(:last-child):after,
li:first-child:nth-last-child(8) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 7);
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

  
1
  
2
  
3
  
4
  
5
  
6
 

  
1
  
2
  
3
  
4
  
5
 

  
1
  
2
  
3
  
4
 

  
1
  
2
  
3
 

  
1
  
2
 

  
1