在CSS中，我們經(jīng)常用到無序列表（ul）來排列內(nèi)容。有時候，我們需要在列表項前面添加一些小圖標，以增加視覺效果。這時候，我們可以使用CSS中的偽元素來實現(xiàn)。
要添加小圖標，我們需要先創(chuàng)建一個CSS類來設(shè)置圖標的樣式，例如：
```
.icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background-image: url(圖標的URL);
background-repeat: no-repeat;
}
```
在這個類中，我們設(shè)置了圖標的顯示方式為內(nèi)聯(lián)塊（inline-block），并且設(shè)置了寬度、高度和右邊距。接下來，我們設(shè)置了圖標的背景圖片，并將其設(shè)置為不重復（no-repeat）。
接下來，我們需要使用偽元素（::before 或 ::after）來添加小圖標。下面是一個例子：
```
ul li::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background-image: url(圖標的URL);
background-repeat: no-repeat;
}
```
在這個例子中，我們使用了 ::before 偽元素，并將其添加到了每一個列表項的前面。我們同樣需要設(shè)置該元素的寬度、高度、右邊距，以及背景圖片。
值得注意的是，我們需要使用 content 屬性來設(shè)置偽元素的內(nèi)容，即空字符串，否則偽元素將無法顯示。
要使用這個類，我們只需要在每個列表項前面添加一個 span 標簽，并在其中添加 icon 類即可：
```使用CSS的小圖標
- 列表項1
- 列表項2
- 列表項3
使用CSS的小圖標
- 列表項1
- 列表項2
- 列表項3