Las líneas las estás haciendo con una misma sentencia con el borde de un `:before` de los diferentes elementos `ul`. Para ajustar el alto simplemente podrías darle un valor de `height` que se ajuste al esquema. Una solución puede ser darle como atributo en el html un `id` a los `ul` en cuestión, y en el css darle un alto a los `:before` de cada uno de ellos. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> /*editado*/ #segundo-ul:before, #cuarto-ul:before{ height: 160px; } #tercer-ul:before { height: 47px; } /*editado*/ div.panel:first-child { margin-top: 20px; } div.treeview { padding: 4px; margin-bottom: 20px; } div.treeview ul:first-child:before { display: none; } .treeview { margin: 0; padding: 0; list-style: none; color: #369; } .treeview ul { margin: 0; padding: 0; list-style: none; color: #369; margin-left: 1em; position: relative; } .treeview ul ul { margin-left: 5.5em; } .treeview ul:before { content: ""; display: block; width: 0; position: absolute; top: 0; left: 0; border-left: 1px solid; bottom: 4.1rem; /* 76px */ } .treeview li { margin: 0; padding: 0.4rem 5em; line-height: 2em; font-weight: 700; position: relative; } .treeview li .container-fluid .row { text-align: center; display: block; } .treeview li .container-fluid .row .lamb-link { display: inline; } .treeview li .container-fluid .lamb-name-module { color: rgba(0,0,0,0.2); } .treeview ul li.lamb-first-li:before { border: none; } .treeview ul li:before { content: ""; display: block; width: 60px; height: 0; border-top: 1px solid; margin-top: 30px; position: absolute; top: 1em; left: 0; } .tree-indicator { margin-right: 5px; cursor: pointer; } /** =================*/ .treeview li { /** =================*/ } .treeview li a:hover { background: rgba(0,0,0,0.2); color: #000; } .treeview li a:hover+ul li a { background: rgba(0,0,0,0.2); color: #000; } .treeview li a:hover+ul li::after, .treeview li a:hover+ul li::before { border-color: #94a0b4; } .treeview li a:hover+ul::before, .treeview li a:hover+ul ul::before { border-color: #94a0b4; } .treeview li a { text-decoration: none; color: inherit; cursor: pointer; height: 100px; width: 15rem; text-decoration: none; background-color: white; color: #8b8b8b; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; box-shadow: 0 10px 11px rgba(0,0,0,0.2); -transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .treeview li a span { top: 50%; margin-top: -0.7em; display: block; } .treeview li button { text-decoration: none; color: inherit; border: none; background: transparent; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; outline: 0; } .treeview li button:active, .treeview li button:focus { text-decoration: none; color: inherit; border: none; background: transparent; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; outline: 0; } <!-- language: lang-html --> <div class="treeview"> <ul> <li class="lamb-first-li"> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> <ul id="segundo-ul"> <li> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> </li> <li> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> <ul id="tercer-ul"> <li> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> <ul id="cuarto-ul"> <li> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> </li> <li> <a> <div class="container-fluid"> <div class="row"> Top level </div> <div class="row"> <i class="fa fa-exclamation-circle fa-2x"></i> </div> <div class="row"> 15 Failed Tests </div> </div> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <!-- end snippet -->