Using CSS to realize the effect of family tree (genealogy)

Family Tree (family tree), also known as genealogy, is used to record the relationship between lineage and generation. This article unifies the example, does not use any JS script, uses the pure CSS to create a beautiful family tree (genealogy), also may apply the Enterprise organization chart.

Html
We use Div#tree to include the entire genealogy structure, internally with UL and Li elements to build the data source. The actual development of these genealogy data sources can be read from the database, just like to get an infinite level of the category list, the following is the main HTML structure.

<div class= "Tree" >
<ul>
<li>
<a href= "#" >Parent</a>
<ul>
<li>
<a href= "#" >Child</a>
<ul>
<li><a href= "#" >grand child</a></li>
</ul>
</li>
<li>
<a href= "#" >Child</a>
<ul>
<li><a href= "#" >grand child</a></li>
<li>
<a href= "#" >grand child</a>
<ul>
<li><a href= "#" >great Grand child</a></li>
<li><a href= "#" >great Grand child</a></li>
<li><a href= "#" >great Grand child</a></li>
</ul>
</li>
<li><a href= "#" >grand child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Css

We use CSS: before,: After two pseudo class content properties to build the connector between the elements, while using the CSS3 to achieve the rounded effect of elements, plus the mouse slide on the hover effect, so that the mouse slide into a tree node element, Related to the descendants of the elements will have a hover effect, complete CSS code is as follows:

. 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'll use:: Before and:: On to draw the connectors*/

. Tree Li::before,. 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 ' top ' of single children*/
. Tree li:only-child{padding-top:0;

/*remove left connector from the
Right connector from last child*/
. Tree Li:first-child::before,. 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'll apply the hover effect 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;
}