<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
ul {
list-style:none;
padding: 0 0 0 2em; /* padding includes space for character and its margin */
/* IE7 and lower use default */
*list-style: disc;
*padding: 0 0 0 1em;
}
ul li:before {
content: '\25BA';
font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
margin: 0 1em 0 -1em; /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */
/* IE7 and lower use default */
*content: none;
*margin: 0;
}
ul li {
text-indent: -1em; /* negative text indent brings first line back inline with the others */
/* IE7 and lower use default */
*text-indent: 0;
}
ul {
list-style-type: none;
}
ul li:before {
content:'*'; /* Change this to unicode as needed*/
width: 1em !important;
margin-left: -1em;
display: inline-block;
}
ul {
list-style: none;
text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}
ul li:before {
content: "\25B2";
margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}
One of the more notable setbacks with these methods is that you 还不行 apply margin or padding to ::marker, and instead must rely on whitespace (as illustrated in the examples here) or use an offset method as outlined in the demo provided in 2.1 below.
1. 使用 list-style-type设置自定义标记
li { list-style-type: "🔧 "; }
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
2. 使用 ::marker设计 list-style-type的样式
/* intentional whitespace, may vary cross-browser */
li { list-style-type: "★ "; }
li::marker { color: red; }