Unicode 字符作为 CSS 中列表项的项目符号

Question

例如，我需要使用星号（★）作为列表项的项目符号。

我已经阅读了 CSS3 模块： Lists ，它描述了如何使用自定义文本作为项目符号，但它对我不起作用。我认为，浏览器根本不支持 ::marker 伪元素。

我怎样才能做到这一点，而不使用图像？

原文由 AntonAL 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑

我可能不会再推荐使用图像了。我会坚持使用 Unicode 字符的方法，如下所示：

 li:before {
  content: "\2605";
}

旧答案

我可能会选择图像背景，它们更高效且对跨浏览器友好。

这是一个例子：

 <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>

原文由 agbb 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用文本作为项目符号

将 li:before 与转义的十六进制 HTML 实体（或任何纯文本）一起使用。

---

例子

我的示例将生成带有复选标记的列表作为项目符号。

 ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

 <ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

---

浏览器兼容性

还没有测试过自己，但它应该支持 IE8。至少 quirksmode 和 css-tricks 是这么说的。

您可以使用条件注释来应用较旧/较慢的解决方案，例如图像或脚本。更好的是，将两者与 <noscript> 一起用于图像。

HTML :

 <!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

---

关于背景图片

背景图像确实很容易处理，但是……

1. 浏览器对 background-size 的支持实际上仅从 IE9 开始。
2. HTML 文本颜色和特殊（ _疯狂_）字体可以做很多事情，HTTP 请求更少。
3. 脚本解决方案可以只注入 HTML 实体，并让相同的 CSS 完成工作。
4. 一个好的重置 CSS 代码可能会使 list-style （更合乎逻辑的选择）更容易。

---

享受。

原文由 222 发布，翻译遵循 CC BY-SA 4.0 许可协议