Как провести линию между двумя кругами, которые касаются обоих кругов?

Question

Я хочу провести линию между двумя кружками, для этого я использовал приведенный ниже код с использованием псевдоэлемента CSS. Я хотел бы сделать линию между этими двумя кругами отзывчивой, теперь она пересекается с окружностью в некоторых других устройствах, таких как мобильные, и т. Д. c. Как сделать его адаптивным или любым другим решением, которое делает тот же дизайн? Пожалуйста, помогите.

.cart_header_tab {
  display: flex;
  margin-top: 35px;
}
.cart_header_tab > div {
  text-align: center;
  margin-right: 100px;
  cursor: pointer;
}
.cart_header_tab h6 {
  color:#02b5f9;
  font-weight: 400;
}
.cart_header_tab div:last-child h6 {
  color:#ccc
}
span.circle_one::after {
  content: "";
  width: 152px;
  height: 1px;
  background: #eee;
  position: absolute;
  top: 6px;
  left: 14px;
}
.cart_header_tab span.circle_one {
  border: 1px solid #2fe4ba;
}
.cart_header_tab span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 100%;
  position: relative;
}

<div class="cart_header_tab">
    <div>
        <span class="circle_one"></span>
         <h6>Order Details</h6>
    </div>
    <div>
        <span class="circle_two"></span>
        <h6>Freight Options</h6>
    </div>
</div>

Answer 1

Используя flex, я вставляю эту линию между кружками, так как сам разделитель является потомком гибкого элемента, а затем с помощью поля настраиваем его в соответствии с кружками

.cart_header_tab {
  display: flex;
  margin-top: 35px;
}

.cart_header_tab>div {
  text-align: center;
  cursor: pointer;
}

.cart_header_tab h6 {
  color: #02b5f9;
  font-weight: 400;
}

.cart_header_tab div:last-child h6 {
  color: #ccc
}

.cart_header_tab {
  position: relative
}

.sep {
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 9px -21px 0;
}

.cart_header_tab span.circle_one {
  border: 1px solid #2fe4ba;
  background: #fff;
  z-index: 1;
}

.circle_two {
  background: #fff;
  z-index: 1;
}

.cart_header_tab span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 100%;
  position: relative;
}

<div class="cart_header_tab">
  <div>
    <span class="circle_one"></span>
    <h6>Order Details</h6>
  </div>
  <div class="sep"></div>
  <div>
    <span class="circle_two"></span>
    <h6>Freight Options</h6>
  </div>
</div>

Answer 2

Вы можете начать настройку кода примерно так:

Имейте в виду, что если вы хотите изменить размер или ширину круга, вы должны настроить другое свойство в css, надеюсь, что это не проблема здесь.

#cart_header_tab {
  position: relative;
  display: inline-block;
}

#cart_header_tab::after {
  content: "";
  position: absolute;
  width: 50%;
  z-index: -1;
  top: 20%;
  left: 25%;
  border: 1px solid gray;
  /* line between circles */
}

#cart_header_tab div {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  min-width: 150px;
}

#cart_header_tab span {
  color: white;
  background: white;
  display: block;
  height: 15px;
  margin: 0 auto 10px;
  padding-top: 20px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid #22A7F2;
}

<div id="cart_header_tab">
  <div><span class="circle_one"></span>
    <h6>Order Details</h6>
  </div>
  <div><span class="circle_two"></span>
    <h6>Freight Options</h6>
  </div>
</div>