horizontale Linie zwischen Kreisen mit transparentem Hintergrund

Question

Ich versuche eine horizontale Linie zwischen leeren Kreisen (kein Hintergrund) zu zeichnen, Wie kann ich eine Linie von einem Kreis zum anderen zeichnen, um genau zu entsprechen, ohne den anderen Kreis zu betreten oder nicht zu erreichen ?

habe ich die Probe mit 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

Wenn Sie gehen zu absolut Ihr #wizard .step::after Pseudoelement zu positionieren, müssen Sie 2 Dinge wissen:

1. Wo es anfangen sollte
2. Wie lange sollte es sein

Sie können sehen, wo es anfangen sollte, da Ihre #wizard .step eine Grenze von 1px hat, eine Polsterung von 2px und eine Inhaltsbreite von 40px.

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

So Ihre Position Stile müssen umfassen left: 46px:

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

Was, wie lange es sein muss, ist es die margin-right zu überbrücken muss der aktuellen #wizard .step und dann die margin-left der nächsten #wizard .step.

Da diese beide 3em sind, können Sie ihr #wizard .step::after Pseudoelement ein width von 6em geben.

Dass sie alle zusammen:

#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>

---

N. B. Es ist mir nicht wirklich klar, warum, aber obwohl das Ergebnis des oben beschriebenen Ansatzes fehlerfrei sein sollte, enthält das tatsächliche Ergebnis winzige Lücken, die jeden Eindruck vermitteln, aus einem Textbuch aus den 1950ern zu stammen.

Wenn Sie diese Lücken beseitigen wollen, verwenden Sie die folgenden Stildeklarationen statt:

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

Answer 2

Da Ihr margin-right und margin-left sind beide 3em, versuchen 6em anstelle von 100%

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

dass eine LITT verlässt le Raum, aber man kann es zwicken:

right:-6.3em; 
width:6.3em;