Unicode字符作为项目符号在CSS中的列表项
例如，我需要使用星号（★）作为列表项目的项目符号。
我已经阅读了CSS3模块：列表 ，描述如何使用自定义文本作为项目符号，但它不适合我。 我想，浏览器根本不支持::marker伪元素。
我怎么做，而不使用图像？
编辑
我可能不会推荐使用图像了。 我会坚持使用Unicode字符的方法，如下所示：
li:before { content: "\2605"; }
老解答
我可能会为图像背景，他们更高效的多function和跨浏览器友好。
这是一个例子：
<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>
使用文本作为项目符号
使用li:before与转义的hexHTML实体（或任何纯文本）。
例
我的例子将产生带有复选标记的列表作为项目符号。
CSS ：
ul { list-style: none; padding: 0px; } ul li:before { content: '\2713'; margin: 0 1em; /* any design */ }
浏览器兼容性
没有testing过自己，但应该从IE8开始支持。 至less这就是quirksmode ＆ css-tricks所说的。
您可以使用条件注释来应用较早/较慢的解决scheme，如图像或脚本。 更好的是，使用与<noscript>的图像。
HTML ：
<!--[if lt IE 8]> *SCRIPT SOLUTION* <noscript> *IMAGE SOLUTION* </noscript> <![endif]-->
关于背景图片
背景图像确实很容易处理，但…
- 浏览器对
background-size支持实际上只是IE9的支持。 - HTML文本颜色和特殊的（ 疯狂的 ）字体可以做很多事情，而且HTTP请求less。
- 一个脚本解决scheme可以只注入HTML实体，并让相同的CSS来完成工作。
- 一个好的重置CSS代码可以使
list-style（更合理的select）更容易。
请享用。
你可以构造它：
#modal-select-your-position li { /* handle multiline */ overflow: visible; padding-left: 17px; position: relative; } #modal-select-your-position li:before { /* your own marker in content */ content: "—"; left: 0; position: absolute; }
这是您可以在3012中使用的W3C解决scheme！
ul { list-style-type: "★"; } /* Sets the marker to a "star" character */
不推荐图像，因为它们可能会在某些设备（带有Retina显示屏的苹果设备）上出现像素化，或者放大时出现。使用字符时，您的列表每次都看起来很棒。
这是迄今为止我find的最好的解决scheme。 它工作得很好，它是跨浏览器（IE 8 +）。
ul { list-style: none; padding-left: 1.2em; text-indent: -1.2em; } li:before { content: "►"; display: block; float: left; width: 1.2em; color: #ff0000; }
重要的是将字符放在具有固定宽度的浮动块中，以便如果文本太长而不能放在一行上，则文本保持alignment状态。 1.2em是你想要的字符的宽度，根据你的需要改变它。 不要忘记重置ul和li元素的填充和余量。
编辑：请注意，如果在ul和li中使用不同的字体，“1.2em”的大小可能会有所不同。 使用像素更安全。
要添加星号，请使用Unicode字符22C6 。
我增加了一个空间，让li和明星之间有一点距离。 空间的代码是A0 。
li:before { content: '\22C6\A0'; }
222的答案更完整的例子：
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; }
我已经包括星形属性来恢复较旧的IE版本的默认列表样式。 如果需要的话，你可以把它们包含在一个有条件的包含中，或者replace为基于背景图像的解决scheme。 我个人认为，以这种方式实现的特殊子弹风格应该在less数不支持伪select器的浏览器上适度地降级。
在Firefox，Chrome，Safari和IE8-10中testing并正确渲染。
ul { list-style-type: none; } ul li:before { content:'*'; /* Change this to unicode as needed*/ width: 1em !important; margin-left: -1em; display: inline-block; }
试试这个代码…
li:before { content: "→ "; /* caractère UTF-8 */ }
这个主题可能是旧的，但这里有一个快速修复ul {list-style:outside none square;}或者ul {list-style:outside none disc;}等等。
然后添加左边的填充列表元素
ul li{line-height: 1.4;padding-bottom: 6px;}
