CSS3列表圖標，是CSS3中一個非常有用的特性，它允許我們為列表項添加各種圖標，從而使我們的頁面更加美觀動人。下面是一些用于CSS3列表圖標優化的代碼片段。

首頁
新聞
產品
聯系我們
/*實心圓點*/
ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-radius: 50%;
width: 10px;
height: 10px;
background: #000;
position: absolute;
left: 0;
top: 6px;
}
/*空心圓點*/
ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-radius: 50%;
width: 10px;
height: 10px;
border: 2px solid #000;
position: absolute;
left: 0;
top: 6px;
}
/*向右箭頭*/
ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-style: solid;
border-width: 0.2em 0 0 0.2em;
display: inline-block;
height: 0.5em;
left: 0;
top: 0.9em;
position: absolute;
transform: rotate(45deg);
width: 0.5em;
}
/*向下箭頭*/
ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-style: solid;
border-width: 0.2em 0.2em 0 0;
display: inline-block;
height: 0.5em;
left: 0.2em;
top: 0.3em;
position: absolute;
transform: rotate(45deg);
width: 0.5em;
}

通過使用上述代碼片段，我們可以方便地為自己的列表項添加不同風格的圖標，使頁面更加美觀動人。