CSS實現樹形連接線是網頁設計中一個非常實用的功能，可以讓網頁看起來更加美觀大方。下面我們就來學習一下如何實現這個功能。

.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來實現樹形連接線，其中parent類表示有子節點的元素。將上述代碼應用到樹形結構的HTML代碼中，就可以實現帶有連接線的樹形結構了。