CSS是現代網站開發中不可或缺的一部分。其強大的功能使得開發人員可以輕松地實現各種各樣的效果，包括樹狀結構。

.tree {
position: relative;
}
.tree ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
z-index: 1;
}
.tree ul::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid black;
width: 0;
height: 100%;
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative;
}
.tree ul ul a {
font-size: .8em;
font-weight: normal;
color: #666;
}
.tree li:before, .tree li:after {
content: '';
position: absolute;
top: 1em;
left: -20px;
border-bottom: 1px solid black;
width: 20px;
height: 1em;
}
.tree li:after {
left: -18px;
border-right: 1px solid black;
}
.tree li:first-child:before {
top: calc(50% - 1px);
}
.tree li:last-child:before {
height: auto;
top: auto;
bottom: 0;
}
.tree li:last-child:before, .tree li:last-child:after {
border: 0;
}

上述代碼展示了如何使用CSS創建樹形結構。首先，我們需要在一個容器元素上添加tree類。然后，在容器元素內部，我們需要添加一個ul元素，其中包含用于表示樹形結構的li元素。

在li元素上設置position：relative屬性，這可以讓我們在元素內部絕對定位它的前導和后繼行。然后，我們為li元素的前導行和后繼行添加樣式，以便將它們與ul元素連接起來。我們還為前導行和后繼行添加不同的邊框樣式，以便讓樹形結構看起來更自然。

最后，我們為ul元素添加樣式，以便讓它能夠占據整個容器元素的高度，同時使連接線處于其上方。我們還在ul元素的前面添加一個偽元素，以便在容器元素中央創建一條豎直邊界線。

通過這些基本的CSS樣式，我們可以輕松地創建一個漂亮的樹形結構。