CODEWITHSUNDEEP
htmlcsshtml-lists
Emilio Venegas Navarrete
Emilio Venegas Navarrete

Reputation: 39

CSS steps connected circles

I'm trying to do some kind of steps connected only with CSS, so far I managed to get this done:

css steps

But I need to remove the line excess where the red is.

 <ul class="step">

    <li class="first">
        <span>1</span>
    </li>
    <li class="second">
        <span>2</span>
    </li>
    <li class="third">
        <span>3</span>
    </li>
    <li class="last">
       <span>4</span>
    </li>
</ul>

section.steps .steps-box .steps-container ul.step{
    margin: 0;
    list-style: none;
    border-top: 1px dotted #000;
}
section.steps .steps-box .steps-container ul.step > li{
    float: left;
    width: 25%;
    margin-top: -40px;
    padding: 0 10px;
}
section.steps .steps-box .steps-container ul.step li span{
    display: block;
    margin: 0 auto;
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 80px;
    border: 1px solid;
    overflow: hidden;
    text-align: center
}

What I need is a line that goes from 1 to 4 only, but I can't figure out how to do that without using images, can someone please help?.

Thank you in advance!

Upvotes: 1

Views: 2596

Answers (1)

RobertQ
RobertQ

Reputation: 11

Try to achieve this with an different approach, not always a list is the best layout. i.e:

<div class="connected-steps">
  <div class="step">1</div>
  <div class="connector"></div>
  <div class="step">2</div>
  <div class="connector"></div>
  <div class="step">3</div>
</div>

then use display:flex on the container and let the .connector to grow to fill the space in between .step.

.connected-steps {
  display: flex;
  width: 100%;
  align-items: center;
}

.step {
  color: white;
  background-color: red;
  display: block;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

.connector {
  flex-grow: 1; //fill the space
  width: 10px;
  content: "";
  display: block;
  height: 1px;
  background-color: red;
}

Here is the working example: https://codepen.io/bondartrq/pen/QOKxGR

This is fully responsive and you could play with flex properties of the container to invert the order and orientation...

Good luck!!

Upvotes: 1

Related Questions