當網頁需要展示大量數據時，常常會用到列表來呈現。但是當列表項過多時，頁面會顯得雜亂無序。這時候，我們可以使用CSS來隱藏列表，并在點擊時展開。

/* 將所有列表項的display屬性設置為none */
ul li {
display: none;
}
/* 給列表項前面添加一個加號以表示可以展開 */
ul li:before {
content: "+";
display: inline-block;
margin-right: 5px;
}
/* 點擊加號時展開列表項 */
ul li.expand {
display: block;
}
/* 點擊加號時將加號改為減號 */
ul li.expand:before {
content: "-";
}

以上代碼將ul中的所有li的display屬性設置為none，也就是隱藏了所有列表項。然后使用:before偽元素在每個列表項前面添加一個加號，表示可以展開。當用戶點擊加號時，我們使用JavaScript將該列表項的class設置為expand，將display屬性設置為block，讓其展開。同時將加號改為減號以表示可以收縮。

這樣的效果看起來簡單卻實用，在網頁中可以使用在導航欄、下拉菜單、信息展示等場合。需要注意的是，這個效果不支持低版本瀏覽器，推薦在現代瀏覽器中使用。