CSS Organization Chart

Question

I have an HTML and CSS organization structure structure and I think this is a simple question. Here is a demo in JSFiddle

CSS

/*Now the CSS*/ * {margin: 0; padding: 0;} .tree { width: auto; margin-left: auto; margin-right: auto; } .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .tree li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } 

What I want to do is: how to draw a line before supporting IT - David Alves. Because we see that the position is the same as IT - support for Juanda.

Someone please help!

Updated Itay's answer in fiddle

Answer 1

jsFiddle Demo

The following styles have been added:

 .tree ul ul::before{ margin-left: -1px; } li a.just-line { display: none; } a.just-line + ul { padding-top: 74px; } a.just-line + ul:before { height: 74px; } 

Answer 2

Like this? http://jsfiddle.net/4tgCu/1/

 .tree li.connect-left > a:before, .tree li.connect-right > a:before{ content: ''; position: absolute; top: 50%; right: -11px; border-top: 1px solid #ccc; width: 11px; } .tree li.connect-left > a:before { left: -11px; right: auto; } 

An additional class has been added that can be used to connect neighbors to the next.