CSS樹形菜單用的符號(hào)

.tree-menu {
text-indent: 15px;
}
.tree-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.tree-menu li:before {
content: "+";
color: #000;
margin-right: 5px;
}
.tree-menu li.collapsed:before {
content: "-";
}
.tree-menu li.leaf:before {
content: "\25CF";
margin-right: 5px;
}

在CSS中，我們可以使用偽元素:before來(lái)設(shè)置樹形菜單的符號(hào)。在上面的代碼中，我們定義了以下符號(hào)：

• 父元素的前綴：使用text-indent屬性來(lái)縮進(jìn)父元素的文本。
• 無(wú)序列表的樣式：使用list-style:none取消默認(rèn)樣式，并去掉外邊距和內(nèi)邊距。
• 展開狀態(tài)的符號(hào)：使用+號(hào)作為展開狀態(tài)的符號(hào)，并設(shè)置顏色和右邊距。
• 折疊狀態(tài)的符號(hào)：與展開狀態(tài)符號(hào)相似，只是使用-號(hào)。
• 子元素的符號(hào)：使用字符編碼\25CF來(lái)表示子元素，并設(shè)置右邊距。

通過這個(gè)簡(jiǎn)單的CSS代碼，我們可以創(chuàng)建漂亮的樹形菜單，并使用不同的符號(hào)表示菜單的展開和折疊狀態(tài)，以及葉子節(jié)點(diǎn)的形狀。