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

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

不使用图像怎么办？

编辑

我可能不再建议使用图像。我会坚持使用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>

将文本用作项目符号

使用li:before与十六进制转义HTML实体（或纯文本）。

例

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

CSS：

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

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

浏览器兼容性

还没有测试过自己，但是从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（更合理的选择）更加容易。

请享用。

您可以构造它：

#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;
}

这是W3C解决方案。您可以在3012中使用它！

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.c​​sswg.org/css-lists/#text-markers

不建议使用图像，因为它们可能会在某些设备（带有Retina显示屏的Apple设备）上或在放大时显示为像素化。使用字符，您的列表每次看起来都很棒。

这是到目前为止我找到的最好的解决方案。它的功能很棒，并且是跨浏览器（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;
}

重要的是将字符放置在具有固定宽度的浮动块中，这样，如果文本太长而无法容纳在一行上，则文本将保持对齐。 1.2em是您想要的字符宽度，请根据需要进行更改。不要忘记重置ul和li元素的填充和边距。

编辑：请注意，如果您在ul和li：before中使用其他字体，则“ 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;
}

我包括了star-hack属性，以恢复旧版IE中的默认列表样式。如果需要，您可以将它们拉出并包含在条件包含中，或者替换为基于背景图像的解决方案。我的拙见是，以这种方式实现的特殊项目符号样式应在不支持伪选择器的少数浏览器上正常降低。

在Firefox，Chrome，Safari和IE8-10中进行了测试，并且可以正确渲染。

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

我遍历了整个清单，截至2020年为止，部分正确和部分不正确的元素一直存在。

我发现使用UTF-8时缩进和偏移是最大的问题，因此我以“直角三角形”项目符号为例，将其作为2020年兼容的CSS解决方案发布。

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
}

利用em为单位与字体大小避免冲突

试试这个代码...

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