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;
}
通过使用上述代码片段，我们可以方便地为自己的列表项添加不同风格的图标，使页面更加美观动人。