CSS3 垂直树状图--运用 :before 和 :after_html/css_WEB-ITnose

程序员文章站 2024-01-01 13:31:46

...

直接上图（原网址），自己CSS3练习demo。

【demo】

【HTML】

        
                parent                
                        child                        
                                Grant child                            
                        
                                            child                        
Grant child
                                                            Grant child                                
Great Grant child
                                    Great Grant child
                                    Great Grant child
                                
                            Grant child

【CSS3】

*{
　　margin:0;
　　padding: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;
}

相关标签： CSS3 垂直树状图--运用 :before 和 :after