горизонтальная линия между кругами с прозрачным фоном

Question

Я пытаюсь нарисовать горизонтальную линию между пустыми кругами (без фона), Как я могу нарисовать линию из одного круга в другую, чтобы точно соответствовать, не входя в другой круг или не достигая этого ?

Я сделал образец, используя codepen

#wizard { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    padding: 15px; 
 
} 
 
#wizard .step { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: transparent; 
 
    border: 1px solid #000; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    padding: 2px; 
 
    margin-right: 3em; 
 
    margin-left: 3em; 
 
    position: relative; 
 
} 
 
#wizard .step:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 1px; 
 
    background-color: #000; 
 
    position: absolute; 
 
    left: auto; 
 
    right: -100%; 
 
    width: 100%; 
 
    top: 50%; 
 
} 
 
#wizard .step:last-child:after { 
 
    display: none; 
 
} 
 
#wizard .step span { 
 
    padding: 11px; 
 
    display: block; 
 
}

<div id="wizard"> 
 
    <div class="step active"> 
 
    <span>1</span> 
 
    </div> 
 
    <div class="step"> 
 
    <span>2</span> 
 
    </div> 
 
    <div class="step"> 
 
    <span>3</span> 
 
    </div> 
 
</div>

Answer 1

Если вы собираетесь абсолютно позиционировать #wizard .step::after псевдо-элемент, вы должны знать 2 вещи:

1. Где он должен начать
2. Как долго она должна быть

Вы можете увидеть, где он должен начать, учитывая, что ваш #wizard .step имеет границу 1px, а отступы 2px и шириной содержимого 40px.

1px + 2px + 40px + 2px + 1px = 46px

Так что ваши стили позиции должны включать left: 46px:

#wizard .step::after { 
position: absolute; 
top: 50%; 
left: 46px; 
} 

А как долго она должна быть, она должна охватывать margin-right от тока #wizard .step, а затем margin-left следующего #wizard .step.

Поскольку это как 3em, вы можете придать ему #wizard .step::after псевдо-элемент а width из 6em.

Собираем все вместе:

#wizard { 
 
    background-color: #eee; 
 
    display:inline-block; 
 
    padding:15px; 
 
} 
 

 
#wizard .step { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: transparent; 
 
    border: 1px solid #000; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    padding: 2px; 
 
    margin-right: 3em; 
 
    margin-left: 3em; 
 
    position: relative; 
 
} 
 

 
#wizard .step::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 46px; 
 
    width: 6em; 
 
    height: 1px; 
 
    background-color: #000; 
 
} 
 

 
#wizard .step:last-child::after { 
 
    display:none; 
 
} 
 

 
#wizard .step span { 
 
    padding: 11px; 
 
    display: block; 
 
}

<div id="wizard"> 
 
    <div class="step active"> 
 
    <span>1</span> 
 
    </div> 
 
    <div class="step"> 
 
    <span>2</span> 
 
    </div> 
 
    <div class="step"> 
 
    <span>3</span> 
 
    </div> 
 
</div>

---

нотабене Мне действительно непонятно, почему, хотя результат такого подхода должен быть безупречным, фактический результат включает в себя крошечные пробелы - каждое впечатление от того, что он из учебника 1950-х годов.

Если вы хотите, чтобы устранить эти пробелы, используйте следующие объявления стилей, вместо:

#wizard .step::after { 
left: 45px; 
width: 6.3em; 
} 

Answer 2

С вашего margin-right и margin-left оба 3em, попробуйте использовать 6em вместо 100%

left:auto; 
right:-6em; 
width:6em; 

Это оставляет ЛИТТ ле пространство, но вы можете настроить его:

right:-6.3em; 
width:6.3em;