Tree li css是一種用于創建樹形結構的css樣式表。它在網頁設計中經常被使用，尤其是在需要展示目錄或分類等內容時。

在使用tree li css時，需要為列表中的每一項指定一個li標簽，并在其中添加一個可選的ul標簽，其中包含了當前項的子項。然后在樣式表中指定每個li標簽的樣式，使其在父子關系中具有不同的排列方式。

ul {
list-style: none; /*去除列表項的默認樣式*/
}
li {
position: relative; /*使父元素的位置成為子元素定位的參考*/
padding-left: 20px; /*添加左側空白，為了容納圖標*/
}
li:before {
content: ""; /*添加一個空的元素*/
position: absolute; /*使元素相對于父元素定位*/
left: 0; /*與父元素左對齊*/
top: 0; /*與父元素頂部對齊*/
width: 10px; /*定義元素的寬度*/
height: 10px; /*定義元素的高度*/
background-color: #000; /*定義元素的背景色*/
border-radius: 50%; /*定義元素的圓角半徑，使其成為圓形*/
}
li:after {
content: ""; /*添加一個空的元素*/
position: absolute; /*使元素相對于父元素定位*/
left: 5px; /*與父元素左對齊*/
top: 5px; /*與父元素頂部對齊*/
width: 2px; /*定義元素的寬度*/
height: 100%; /*定義元素的高度*/
background-color: #000; /*定義元素的背景色*/
}
li:last-child:after {
display: none; /*去除最后一項右側的線*/
}
li:before {
content: ""; /*添加一個空的元素*/
position: absolute; /*使元素相對于父元素定位*/
left: -10px; /*向左移動十個像素*/
top: 5px; /*與父元素頂部對齊*/
width: 0; /*定義元素的寬度*/
height: 0; /*定義元素的高度*/
border-top: 5px solid transparent; /*上邊框為透明*/
border-bottom: 5px solid transparent; /*下邊框為透明*/
border-left: 10px solid #000; /*左邊框為實線，顏色為黑色*/
}
li:last-child:before {
height: 50%; /*將最后一項的箭頭位置向上移動一半*/
}

通過添加:before和:after偽元素，我們可以為每個列表項添加一個圖標和連線，形成具有層次結構的樹形結構。在樣式表中還可以為不同的層級指定不同的樣式，使樹形結構更加美觀和實用。