通过图片的方式也能实现,就像下面这样:
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
但是,有一种优雅的方法来自定义li的项目符号颜色和图标,而不需要图片,扩展性更好
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• "; /* 自定义图标,也可以使用字体图标 如:content: "\f105"; font-family: FontAwesome;*/
color: #ABCDEF; /* 自定义颜色 */
}