CSS Verbinde Kreise mit einer gepunkteten Linie ⇐ HTML

[Anonymous]

Ich habe vier Rechtecke und in jedem dieser Rechtecke befindet sich ein Kreis. Ich versuche, diese Kreise mit einer gepunkteten Linie zu verbinden, aber die Linie stoppt mitten auf dem Weg. Ich bin mir nicht sicher, warum.
Und warum wird mein erstes Rechteck in zwei Hälften geschnitten?
Hier ist ein Codepen: https://codepen.io/onche-onche/pen/LYoZBex
und hier ist der Code:

Code: Select all

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e0e0e0;
}

.quatre-rectangles {
width: 50%;
position: relative;
}

.rectangle {
height: 19em;
margin: 1em 0;
background-color: #fef1f2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: flex;
justify-content: center;
border-radius: 40px;
padding: 1em;
box-sizing: border-box;
}

.rectangle:first-child {
margin-top: 400px;
}

.circle {
width: 3em;
height: 3em;
background-color: #41be54;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5em;
font-family: 'Lexend Deca', sans-serif;
position: relative;
z-index: 1;
margin-top: 1em;
align-self: center;
}

.rectangle:not(:last-child) .circle::after {
content: "";
position: absolute;
bottom: -7em;
left: 50%;
width: 0;
height: 8em;
border-left: 4px dotted #41be54;
transform: translateX(-50%);
z-index: 0;
opacity: 0.5;
}

Code: Select all

1


2


3


4

Ich habe versucht, die Höhe davon zu ändern:

Code: Select all

.rectangle:not(:last-child) .circle::after {

aber ich bekomme einige seltsame Ergebnisse