CSS: Ränder die kürzer als die Box sind
Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.
Aber zurück zu den Rändern. Hier erstmal mit "absolute":
Links (80% Länge):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Links (80% Länge und unten + oben Abstand):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}