CSS3 vertical tree chart-Use: before AND: after, css3 tree

CSS3 vertical tree chart-Use: before AND: after, css3 tree

For more information, see the video. My own CSS3 practice demo.

[Demo]

[HTML]

<div class="tree">        <ul>            <li>                <a href="#">parent</a>                <ul>                    <li>                        <a href="#">child</a>                        <ul>                            <li>                                <a href="#">Grant child</a>                            </li>                        </ul>                    </li>                    <li>                        <a href="#">child</a>                        <ul>                            <li><a href="#">Grant child</a></li>                            <li>                                <a href="#">Grant child</a>                                <ul>                                    <li><a href="#">Great Grant child</a></li>                                    <li><a href="#">Great Grant child</a></li>                                    <li><a href="#">Great Grant child</a></li>                                </ul>                            </li>                            <li><a href="#">Grant child</a></li>                        </ul>                    </li>                </ul>            </li>        </ul>        </div>

 

[CSS3]

*{
Margin: 0;
Padding: 0;
}
. Tree ul {
Padding-top: 20px;
Position: relative;
Webkit-transition: all 0.5 s;
-Moz-transition: all 0.5 s;
Transition: all. 3 s;
}
. Tree li {
Float: left;
List-style: none;
Text-align: center;
Position: relative;
Padding: 20px 5px 0 5px;
Webkit-transition: all 0.5 s;
-Moz-transition: all 0.5 s;
Transition: all. 3 s;
}
/* Use: before,: after as the branch line */
. Tree li: before,. tree li: after {
Content :"";
Position: absolute;
Top: 0;
Right: 50%;
Width: 50%;
Height: 20px;
Border-top: 1px solid # ccc;
}
. Tree li: after {
Right: auto;
Left: 50%;
Border-left: 1px solid # ccc;
}
. Tree li: first-child: before,. tree li: last-child: after {
Border: 0 none;
}
. Tree li: last-child: before {
Border-right: 1px solid # ccc;
-Webkit-border-radius: 0 10px 0 0;
-Moz-border-radius: 0 10px 0 0;
Border-radius: 0 10px 0 0;
}
. Tree li: first-child: after {
-Webkit-border-radius: 10px 0 0 0;
-Moz-border-radius: 10px 0 0 0;
Border-radius: 10px 0 0 0;
}

/* Delete the branch line with only one branch */
. Tree li: only-child: before,. tree li: only-child: after {
Border: none;
}
. Tree li: only-child {
Padding-top: 0;
}

/* Add a sub-branch with only one branch */
. Tree ul: before {
Content :"";
Position: absolute;
Top: 0;
Left: 50%;
Border-left: 1px solid # ccc;
Width: 0;
Height: 20px;
}
. Tree {
Display: inline-block;
Border: 1px solid # ccc;
Padding: 5px 10px;
Color: #666;
Text-decoration: none;
Padding: 10px;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
Border-radius: 5px;
Webkit-transition: all 0.5 s;
-Moz-transition: all 0.5 s;
Transition: all. 3 s;
}

/* Add selected status */
. Tree li a: hover,. tree li a: hover + ul li {
Background-color: # c8e4f8;
Color: #000;
Border: 1px solid #94a0b4;
}
. 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: before {
Border-color: #94a0b4;
}