Create css circles connected by line

Question

I need to do this kind of slider that is just three circles connected by a line and with a description below each circle:

But at the moment I just have this:

And this is the code I used to make that:

            
              
                
                
                  Selecciona 

                  cantidad
                
              
              
                
                
                  Selecciona 

                  destino
                
              
              
                
                
                  Confirma 

                  transferencia

This is the css code:

.slider-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  overflow: hidden;
}

.slider-container::before {
  position: absolute;
  top: calc(50% - 20px);
  right: 0;
  left: 0;
  Content: "";
  Background-color: grey;
  height: 1px;
  z-index: -1;
}

Anyone knows how to make that line behind the circles and that doesn't exceed them?

user_3744304 · Answer

Sidenote: This is why I would never use tailwindcss or the likes. You don't need it, and it totally ruins the HTML.

Now compare the markup you have with the markup below - which is a) much, much more concise, b) using only a single CSS class and c) using the proper semantic elements for the job.

It also works for 2 or 4 or 7 items. Sure it needs some refinement regarding size and color of the active circle, but that should be an easy adjustment for you.

The only restriction of this solution is that your page background-color needs to be solid and be matched by the background-color of the ::after elements.

document.querySelectorAll('.steplist').forEach(steplist => {
  steplist.addEventListener('click', function(event) {
    if (event.target.nodeName !== 'LI') return;
    const items = event.target.closest('.steplist').querySelectorAll('li');
    for (const item of items) {
      item.classList.toggle('active', item === event.target);
    }
  });
});

*, ::after, ::before { box-sizing: border-box; }

.steplist {
  border-top: 2px solid #ccc;
  display: inline-flex;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  list-style-type: none;
  gap: 7em;
  margin: 0;
  padding: 0;
  --circle-radius: 8px;
}

.steplist li {
  color: #999;
  cursor: pointer;
  padding: calc(5px + var(--circle-radius)) 0 0;
  margin: 0;
  position: relative;
  text-align: center;
}

.steplist li::before {
  background-color: #ccc;
  border-radius: 50%;
  content: '';
  position: absolute;
  height: calc(2 * var(--circle-radius));
  width: calc(2 * var(--circle-radius));
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.steplist .active {
  color: black;
}

.steplist .active::before {
  background-color: green;
  box-shadow: 0 0 0 3px rgba(0,255,0,.25);
}

.steplist li:first-child::after {
  background-color: white;
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: -2px;
  left: calc(-50% - var(--circle-radius));
}

.steplist li:last-child::after {
  background-color: white;
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: -2px;
  left: calc(50% + var(--circle-radius));
}

.circle-big {
  --circle-radius: 12px;
}


  Point 1
whatever
  Point 2
whatever
  Point 3
whatever








  Point 1
whatever
  Point 2
whatever
  Point 3
whatever
  Point 4
whatever

user_5824444 · Answer

Finally I solve the case with this code, I added the custom classes so you can understand what are those, and in the slider-container:before, the formula 'top: calc(50% - 22px)', the px can change depending of the size of the screen. :

/* slider css code */

.slider-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  overflow: hidden;
}

.slider-container::before {
  position: absolute;
  top: calc(50% - 22px);
  right: 65px;
  left: 65px;
  content: "";
  background-color: #d8d8d8;
  height: 1px;
  z-index: -1;
}

@media (max-width: 768px) {
  .slider-container::before {
    top: calc(50% - 22px);
    right: 60px;
    left: 60px;
  }
}


/* this are custom css classes we use at work */

.wi-12 {
  width: 12px;
}

.he-12 {
  height: 12px;
}

.wi-24 {
  width: 24px;
}

.he-24 {
  height: 24px;
}

@media (min-width: 768px) {
  .wi-md-20 {
    width: 20px;
  }
  .he-md-20 {
    height: 20px;
  }
  .wi-md-30 {
    width: 30px;
  }
  .he-md-30 {
    height: 30px;
  }
  .wi-md-100 {
    width: 100px;
  }
}

.wi-70 {
  width: 70px;
}

.bg-green-700 {
  background-color: #00bf79;
}

.bg-gray-300 {
  background-color: #bababa;
}

.bor-rounded-full {
  border-radius: 50%;
}

.font-Roboto {
  font-family: "Roboto";
}

.fs-10 {
  font-size: 10px;
}

.fs-md-12 {
  font-size: 12px;
}




  
    
      
    
    
      Selecciona 
 cantidad
    
  
  
    
      
    
    
      Selecciona 
 destino
    
  
  
    
      
    
    
      Confirma 
 transferencia

Create css circles connected by line

2 Answers