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

【问题标题】：How to use tick / checkmark symbol (✓) instead of bullets in unordered list?如何在无序列表中使用勾号/复选标记符号（✓）而不是项目符号？
【发布时间】：2016-03-12 13:12:33
【问题描述】：

我有一个列表，我想在列表文本之前添加刻度符号。是否有任何 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>
  <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>

【问题讨论】：

标签： css html special-characters

【解决方案2】：

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

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<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>
  <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><!-- not working on Stack snippet; check fiddle demo -->
  <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>

jsFiddle

参考资料：

【讨论】：

这与 Josh Crozier 的回答没有什么不同，并且遇到了与destroying indentation on wrapping 相同的问题。此外，在 Chromium/Ubuntu 上，最后一个字符也没有出现在小提琴中，但这无论如何都不是重点——乔希的回答是解决方案的要点。使用什么复选标记字符是一种设计选择。
@DanDascalescu，这个答案通过提供一些人可能不知道的复选标记选项扩展了 Josh Crozier 的解决方案。这是有价值的信息。它们是“设计选择”这一事实并没有使这个答案变得不那么有用。在我看来，您的否决票是没有根据的：（1）答案对很多人有用（并且有近 30 个赞成票），（2）答案不会假装是风格选择，以及（3）我没有试图解决任何其他问题（正如你所说，“无论如何都是无关紧要的”）
我看到的复选标记选项“\2713”和“\2714”是原始 Unicode 代码点。我看不出他们长什么样。如果答案想要给出样式选择，它可以包括一些实际的复选标记：✓、✔、☑、✅。使用什么复选标记并不是一个有趣的问题。如何使用复选标记是。我认为它是“我如何画一艘目前在水中的船”，而不是“我可以画什么深浅的蓝色”。这有意义吗？
您有权从您希望的任何角度查看此答案。我不会与你的意见争论。然而，事实是，访问这篇文章的绝大多数人都认为这个答案很有用。我就这样吧。感谢您的反馈。 @DanDascalescu
人们出于许多不同的原因投票。人们投票的原因与您的不同。您不同意此答案的内容。您并不是说答案是错误的或过时的（就像您引用的链接一样），您只是不喜欢它。这对我来说没问题。您有权发表自己的意见。

【解决方案3】：

作为解决方案的补充：

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

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

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

注意：解决其他答案的包装问题：

我们在每个<li>的左边保留1.5m ems的空间
然后将 SVG 放置在该空间的开头 (position: absolute; left: 0)

这里有更多Font Awesome black icons。

查看此CODEPEN，了解如何添加颜色和更改其大小。

【讨论】：

【解决方案4】：

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

你可以使用这个简单的css样式

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

【讨论】：

亚当的回答谈到了包装问题，但它需要大量的额外代码......这很有效。间距对我来说是一种触动，所以我最终在它的末尾添加了一个额外的 \1\1 以将复选标记与
.

我用过 ul { list-style-type: '\2713 '; }（注意字符串末尾的空格）适用于 Chrome、Edge 和 Firefox。没有在 Opera 中检查过

这应该是选择的答案，因为它不会破坏列表的缩进...当然你可以使用任何 unicode 代码