CSS3 垂直ツリーマップ - :before および :after_html/css_WEB-ITnose の使用

直上图（原网址），自己CSS3练习デモ。

【デモ】

【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】

*{
マージン:0;
パディング: 0;
}
.tree ul{
padding-top:20px;
position:relative;
webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all .3s;
}
.tree li{
float:left;
list-style: none;
text-align: center;
position:relative;
padding:20px 5px 0 5px;
webkit-transition: all 0.5s;
-moz-transition : all 0.5s;
transition:all .3s;
}
/*利用::before,::after作分支線*/
.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;
}

/*删除仅只有一分支的分支線*/
.tree li:only-child::before,.tree li:only-child::after{
border:none;
}
.tree li:only-child{
padding-top:0;
}

/*追加仅只有一分支的下分支線*/
.tree ul ul::before{
content:"";
position:Absolute;
top:0;
left:50%;
border-left:1px Solid #ccc;
width:0;
height:20px;
}
.tree a{
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.5s;
-moz-transition: all 0.5s;
transition:all .3s;
}

/*追加选中状態态* /
.tree li a:hover,.tree li a:hover+ul li a{
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 ul::before{
border-color: # 94a0b4;
}