Tengo una barra lateral con una lista de enlaces. ¿Cómo puedo hacer la línea vertical que se conecta entre el título de la lista y otra descripción de la imagen de la lista?

y mi código html:

 <div style="color: white; padding-left: 50px; margin-top: 30px;"> <li style="color: white; " ><B>Menu Principal</B> </li> </div> <li class="active opened active has-sub" style="margin-top: 25px;"> <a routerLink="/Construction-data"> <i class="entypo-gauge"></i> <span class="title">Base de Données</span> </a> </li> <ul class="visible"> <li class="active"> <a routerLink="/Construction-data"> <span class="title">Conception</span> </a> </li> </ul> <ul> <li> <a routerLink="/construction"> <span class="title">Construction</span> </a> </li> </ul> <ul> <li> <a routerLink="/Exploitation-data"> <span class="title">Exploitation</span> </a> </li> </ul>