CSS中的樣式不僅可以改變文本的顏色、字體、大小等基本屬性，同樣也可以擴展到文本前的圖標樣式。這里給大家介紹幾種常用的列表前不同圖標的實現方式。

/* 方式一：使用background */
ul li {
background: url(圖片路徑) no-repeat left center;
padding-left: 20px;
}
/* 方式二：使用list-style-image */
ul {
list-style-image: url(圖片路徑);
padding-left: 20px;
}
/* 方式三：使用list-style-type */
ul {
list-style-type: disc; /* 圓形實心 */
}
ul li:before {
content: "";
display: inline-block;
width: 10px; /* 圖標大小 */
height: 10px;
background: url(圖片路徑) no-repeat center center;
margin-right: 10px;
vertical-align: middle;
}
/* 方式四：使用文字圖標 */
ul {
padding-left: 20px;
}
ul li:before {
content: "\25CF"; /* 實心圓點圖標 */
margin-right: 10px;
font-size: 12px; /* 圖標大小 */
color: #333; /* 圖標顏色 */
}

通過上述幾種方式，可以實現不同樣式、不同大小、不同顏色、不同形狀的列表前圖標效果。這種技巧在Web設計中非常常用，使得頁面能夠更加美觀、簡潔，增強了用戶的視覺體驗。