一尘不染

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

css

例如,我需要使用星号(★)作为列表项目的项目符号。

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

不使用图像怎么办?


阅读 400

收藏
2020-05-16

共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>
2020-05-16