CSS Соедините круги пунктирной линией ⇐ Html

[Anonymous]

У меня есть четыре прямоугольника, внутри каждого из которых есть круг. Я пытаюсь соединить эти круги пунктирной линией, но линия останавливается посередине, и я не знаю почему.
И еще, почему мой первый прямоугольник разрезан пополам?
Вот код: https://codepen.io/onche-onche/pen/LYoZBex
и вот код:

Код: Выделить всё

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;
}

Код: Выделить всё

1


2


3


4

Я попробовал изменить высоту:

Код: Выделить всё

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

но получаю странные результаты

Подробнее здесь: https://stackoverflow.com/questions/785 ... otted-line