How to make line stay the same?

Is there anyone who can help?

I have made a list, in the middle it is connected with 'see photo'

I have put this together with CSS in such a way that it fits nicely on certain widths of screens. But if it differs a bit from screen width, it's dead. As you see in photo. How can I make sure that these lines ALWAYS stay the same??

This is my html:
<div class="lijn m-auto d-flex justify-content-center"><img width="50" height="50"src="Circle"></div>

This is my css:
.lijn::before {
content: "";
display: inline-block;
position: absolute;
width: 50px !important;
left: 49.3% !important;
top: -42% !important;
}

.lijn::after {
content: "";
display: inline-block;
position: absolute;
width: 50px !important;
left: 44.3% !important;
top: 138% !important;
}

The image is just the circle. Where I then put 2 lines in front and behind. On mobile these will be placed under each other so it will just run.

Schermafbeelding_2023-06-06_om_13.05.18.png

Schermafbeelding_2023-06-06_om_13.05.24.png

RianẍaOP•6/6/23, 12:40 PM

.lijn {
position: relative;
width: 465.12px;
left: -100%;
}

.lijn img {
z-index: 1;
transform: rotate(66deg);
}

.lijn::before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 2px;
background-color: #1F4858;
right: -5.5%;
top: 50%;
}

.lijn::after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 2px;
background-color: #1F4858;
left: -5%;
top: 50%;
}

I changed to this. Is works, only the width of the line must be exact as the height of the row. How can I do that?

Chris Bolson•6/6/23, 2:21 PM

If you could set up a codepen with the code it would make it easier for somebody to help you.