Css 如何使用勾号/复选标记符号（✓；）而不是无序列表中的项目符号？

我有一个列表，我想在列表文本之前添加勾号符号。有没有CSS可以帮助我以这种方式应用

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

注意：我想在这种类型的HTML代码中使用它

这是我的文本
这是我的文本
这是我的文本
这是我的文本
这是我的文本

您可以使用在每个列表项之前插入该字符：

ul{
列表样式：无；
}
李：以前{
内容:'✓';
}

这是我的文本
这是我的文本
这是我的文本
这是我的文本
这是我的文本

您可以使用以下三种不同的复选标记样式：

ul:first child li:before{content:“\2713\0020”}/*或*/
ul:nth child（2）li:before{content:“\2714\0020”}/*或*/
最后一个孩子李：在{内容：“\2611\0020”}
ul{列表样式类型：无；}

这是我的文本
这是我的文本
这是我的文本
这是我的文本
这是我的文本


这是我的文本
这是我的文本
这是我的文本
这是我的文本
这是我的文本


这是我的文本
这是我的文本
这是我的文本
这是我的文本
这是我的文本

作为解决方案的补充：

ul li:before {
 content: '✓'; 
}

您可以使用任何SVG图标作为内容，例如

ul{
列表样式：无；
左侧填充：0；
}
李{
位置：相对位置；
左侧填充：1.5em；/*保留包装上压痕的空间*/
}
李：以前{
内容：“”；/*SVG的占位符*/
位置：绝对位置；
左：0；/*将SVG放置在填充的开始处*/
宽度：1米；
高度：1米；
背景：url（“数据：image/svg+xml；utf8”），不重复；
}

这是我的文本
这是我的文本
这是我的文本，很长，需要包装。请注意，包装保留了子弹的压痕
这是我的文本
这是我的文本

我用过这个，它在Chrome 65上工作。我能够使用1px实心边框，在ul li:before上向左浮动和向右浮动，正常地包装每个

，您可以将边框颜色设置为元素的背景。感谢您的解决方案！我添加了一个注释，即包装上的压痕丢失。（很抱歉编辑了这篇文章，但它比只留下评论更能说明问题，希望我们能找到一个解决方法。）@Josh：包装问题有一个解决方案。为了清晰起见，我对它进行了编辑，这取决于你是否将其包括在内。这与Josh Crozier的回答没有什么不同，并且也存在着同样的问题。另外，最后一个字符也不会出现在Chromium/Ubuntu上的小提琴上，但这不是重点，Josh的回答是解决方案的要点。使用什么样的复选标记字符是一种设计选择。@DanDascalescu，这个答案通过提供一些人可能不知道的复选标记选项，扩展了Josh Crozier的解决方案。这是很有价值的信息。它们是“设计选择”这一事实并没有使这个答案变得不那么有用。在我看来，你的否决票是毫无根据的，因为：（1）答案对很多人都很有用（并且有近30张赞成票），（2）答案除了风格选择之外，没有任何其他的东西，（3）我没有试图解决任何其他问题（正如你所说，这些问题“无论如何都是多余的”）我看到的复选标记选择，“\2713”和“\2714”，是原始Unicode代码点。我看不出它们是什么样子。如果答案想要给出样式选择，它可以包括一些实际的复选标记：✓, ✔, ☑, ✅. 使用什么复选标记不是一个有趣的问题。如何使用复选标记是很重要的。我把它看作是“我如何画一艘目前在水里的船”，而不是“我能画出什么深浅的蓝色”。这有意义吗？你有权从任何角度来看待这个答案。我不会反驳你的意见。然而，事实是，访问这篇文章的绝大多数人认为这个答案很有用。我就这么说吧。谢谢你的反馈@丹达斯加州人投票的原因很多。人们投票的理由与你不同。你不同意这个答案的内容。你不是说答案是错误的或过时的（就像你引用的链接），你只是不喜欢它。我没问题。你有权发表你的意见。亚当的回答涉及到包装问题，但它需要大量额外的代码。。。这就行了。间距对我来说是一个点睛之笔，所以我只是在它的末尾添加了一个额外的\1\1，以将复选标记与

隔开。我使用了ul{list style type:'\2713'；}（注意字符串末尾的空格），它在Chrome、Edge和Firefox中工作。不是在歌剧院检查的

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

ul {
     list-style-type: '\2713';
   }