剪辑

我可能不会再推荐使用图片了，我会坚持使用 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 实体(或任何纯文本)一起使用。

例子

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

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>

Browser Compatibility

我自己还没有测试过，但是从 IE8开始就应该支持了。 At least that's what 离奇莫德 & CSS 把戏 say.

您可以使用条件注释来应用较旧/较慢的解决方案，如图像或脚本。更好的方法是，将两者与 <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(更符合逻辑的选择)更容易。

好好享受吧。

试试这个密码。

li:before {
content: "→ "; /* caractère UTF-8 */
}

你可以构造它:

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

<ul id="modal-select-your-position">
<li>First item</li>
<li>Second item</li>
</ul>

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 版本。如果需要，您可以将它们提取出来，并将其包含在条件包含中，或者使用基于背景图像的解决方案替换它们。我的拙见是，以这种方式实现的特殊项目符号样式应该在少数不支持伪选择器的浏览器上优雅地降级。

在 Firefox，Chrome，Safari 和 IE8-10中测试，并且呈现正确。

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

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

Https://drafts.csswg.org/css-lists/#text-markers

更新: 根据评论，到2021年，这在所有的现代浏览器中都可以使用。

要添加一个星号，可以使用 Unicode字符 22C6。

I added a space to make a little gap between the li and the star. The code for space is A0.

li:before {
content: '\22C6\A0';
}

不推荐使用图片，因为它们可能在某些设备(带有 Retina 显示屏的苹果设备)上出现像素化，或者在放大时出现像素化。有了角色，你的列表每次看起来都很棒。

这是我目前为止找到的最好的解决方案。它工作得很好，而且是跨浏览器的(IE8 +)。

ul {
list-style: none;
padding-left: 1.2em;
text-indent: -1.2em;
}


li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}

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

重要的是让字符在一个固定宽度的浮动块中，这样，如果文本太长，无法放在一行上，文本仍然保持对齐。 1.2 em 是你想要的字符宽度，根据你的需要改变它。 Don't forget to reset padding and margin for ul and li elements.

编辑: 请注意，如果您在 ul 和 li: before 中使用不同的字体，“1.2 em”的大小可能会有所不同。使用像素更安全。

这个话题可能有点老，但这里有一个快速解决办法 ul {list-style:outside none square;}或 ul {list-style:outside none disc;}等等。

然后将左边填充添加到列表元素

ul li{line-height: 1.4;padding-bottom: 6px;}

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作为单位，以避免与字体大小冲突

今天，有一个 ::marker选项。所以,

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

正如在 这些 二注释中提到的，现代的方法是使用 list-style-type或 ::marker。您也可以根据您的用例组合它们。

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

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

2.1间距

虽然在上面的演示中还不是很明显，但是这个标记将 离开从列表中移除，而不是将它自己推向 进入。这意味着它可能落在网格之外，并且/或者可能被其他元素遮挡。

我已经创建了一个示例 关于 Codepen 的，它突出显示了空白问题以及两个可能的解决方案，这取决于您是需要匹配默认的 ul样式还是需要在父容器中创建一些东西。

3. 专门为变体使用 ::marker:

li.one::marker { content: "🥇 "; }
li.two::marker { content: "🥈 "; }
li.three::marker { content: "🥉 "; }

<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
</ul>

其他资源:

• “列出标记和字符串样式”作者: Eric Meyer，CSS 技巧[2021]
• Can I Use list-style-type <string> (vs. list-style-type)
• 我能用 ::marker吗