I have four rectangles and with a circle inside each one of those rectangles. I’m trying to connect those circles with a dotted line, but the line stops in the middle of the way I’m not sure why.
Also why is my first rectangle cut in half ?
Here is a codepen: https://codepen.io/onche-onche/pen/LYoZBex
and here is the code:
<body>
<div class="quatre-rectangles">
<div class="rectangle">
<div class="circle">1</div>
</div>
<div class="rectangle">
<div class="circle">2</div>
</div>
<div class="rectangle">
<div class="circle">3</div>
</div>
<div class="rectangle">
<div class="circle">4</div>
</div>
</div>
</body>
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;
}
I tried changing the height of this:
.rectangle:not(:last-child) .circle::after {
but I get some weird results