CSS是一種強大的樣式表語言，可以為網頁元素添加豐富的樣式。在網站開發中，通常需要給樹形結構添加線段，以增強其可讀性和美觀性。下面我們來學習如何使用CSS為樹節點添加線段。

/* 定義樹形結構 */
.tree-node {
position: relative;
}
/* 定義線段 */
.tree-node::before {
content: '';
position: absolute;
top: 50%;
left: -10px;
border-left: 1px solid #000;
height: 50%;
transform: translateY(-50%);
}
.tree-node::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
border-left: 1px solid #000;
height: 50%;
transform: translateY(-50%);
}
/* 定義最后一個節點的線段 */
.tree-node:last-child::before {
height: 100%;
}

以上代碼中，我們首先定義了樹形結構的容器類名為.tree-node。為了添加線段，我們使用了:before和:after偽元素，在樹節點左右兩側添加了豎直的線段。其中，content屬性為空，目的是使偽元素顯示出來。border-left屬性定義了線段的樣式，height屬性定義了線段的高度。transform屬性是為了讓線段居中對齊。

如果一個節點是樹的最后一個節點，我們需要修改它的:before偽元素的高度，使線段和樹的底部對齊。這可以通過:last-child偽類來實現。

如果我們想要樹的深度超過兩級，我們還需要考慮子節點的線段。為此，我們可以給子節點添加padding-left屬性，使其左側騰出足夠的空間，然后繼續使用:before偽元素添加線段。這樣，樹形結構就能夠完整地呈現出來。

總之，使用CSS為樹節點添加線段是一項簡單而實用的技巧。通過掌握以上知識，我們能夠為網站增添更多的美感和用戶體驗。