CSS實(shí)現(xiàn)樹形連接線是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常實(shí)用的功能，可以讓網(wǎng)頁(yè)看起來更加美觀大方。下面我們就來學(xué)習(xí)一下如何實(shí)現(xiàn)這個(gè)功能。

.tree {
position: relative;
}
.tree ul {
padding-left: 20px;
}
.tree li {
position: relative;
list-style: none;
margin: 0;
padding: 10px 0px;
}
.tree li::before, .tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 10px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
.tree li:only-child {
margin-left: 0;
}
.tree li:first-child::before, .tree li:last-child::after {
border: 0 none;
}
.tree li:last-child::before {
border-bottom: 1px solid #ccc;
}
.tree li.parent::before {
content: '';
position: absolute;
top: 0px;
left: 20px;
border-left: 1px solid #ccc;
height: 100%;
}
.tree li.parent::after {
content: '';
position: absolute;
top: 0px;
left: 20px;
border-top: 1px solid #ccc;
width: 0;
height: 10px;
}

上面的代碼利用偽元素::before和::after來實(shí)現(xiàn)樹形連接線，其中parent類表示有子節(jié)點(diǎn)的元素。將上述代碼應(yīng)用到樹形結(jié)構(gòu)的HTML代碼中，就可以實(shí)現(xiàn)帶有連接線的樹形結(jié)構(gòu)了。