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:

            <div
              
            >
              <div >
                <i
                  
                ></i>
                <p >
                  Selecciona <br />
                  cantidad
                </p>
              </div>
              <div>
                <i
                  
                ></i>
                <p >
                  Selecciona <br />
                  destino
                </p>
              </div>
              <div>
                <i
                  
                ></i>
                <p >
                  Confirma <br />
                  transferencia
                </p>
              </div>
            </div>

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?

CodePudding user response：

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

<ol >
  <li>Point 1<br>whatever</li>
  <li>Point 2<br>whatever</li>
  <li>Point 3<br>whatever</li>
</ol>

<br><br><br>

<ol >
  <li>Point 1<br>whatever</li>
  <li>Point 2<br>whatever</li>
  <li>Point 3<br>whatever</li>
  <li>Point 4<br>whatever</li>
</ol>

CodePudding user response：

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div  style="
                   background: rgba(0, 191, 121, 0.3);
                  ">
      <div ></div>
    </div>
    <p >
      Selecciona <br /> cantidad
    </p>
  </div>
  <div >
    <div >
      <div ></div>
    </div>
    <p >
      Selecciona <br /> destino
    </p>
  </div>
  <div >
    <div >
      <div ></div>
    </div>
    <p >
      Confirma <br /> transferencia
    </p>
  </div>
</div>