CSS 項(xiàng)目列表是網(wǎng)頁設(shè)計(jì)過程中經(jīng)常用到的一種布局方式。它通常由一個(gè)無序列表（ul）和若干個(gè)列表項(xiàng)（li）構(gòu)成，每個(gè)列表項(xiàng)代表一個(gè)項(xiàng)目。在某些情況下，我們希望列表項(xiàng)左邊有一定的空白，這樣可以使得文本與左邊邊框之間有一定距離，從而更加美觀。那么接下來，我們將介紹一些實(shí)現(xiàn)這一效果的 CSS 方法。

li {
padding-left: 20px; /* 在左側(cè)設(shè)置20像素的內(nèi)邊距 */
}
li:before { /* 利用偽元素添加左側(cè)空白 */
content: "";
display: inline-block;
width: 20px;
height: 1px; /* 高度可以任意設(shè)置，只是用來占位而已 */
}

以上兩種方法均可以為列表項(xiàng)左側(cè)添加一定的空白，但它們的實(shí)現(xiàn)方式略有不同。第一種方法是通過在列表項(xiàng)樣式中設(shè)置內(nèi)邊距（padding）的方式來實(shí)現(xiàn)，而第二種方法則是利用偽元素（:before）在列表項(xiàng)前面添加一個(gè)不可見的占位元素，并設(shè)置寬度（width）以達(dá)到相同的效果。

需要注意的是，第二種方法需要將偽元素的 display 屬性設(shè)置為 inline-block 或 block，否則它將不會(huì)占用任何空間。此外，如果使用第二種方法，在使用 :hover 等偽類選擇器時(shí)，也應(yīng)該將它們應(yīng)用到 li:before 而不是 li，否則當(dāng)鼠標(biāo)懸浮在空白區(qū)域時(shí)，該效果將被取消。