如何在无序列表中使用勾号/复选标记符号 (✓) 代替项目符号？

Question

我有一个列表，我想在列表文本前添加刻度符号。有没有什么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>

Answer 1

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

ul {
  list-style: none;
}

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

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

Answer 2

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

ul:first-child  li:before { content:"13[=10=]20"; }  /* OR */
ul:nth-child(2) li:before { content:"14[=10=]20"; }  /* OR */
ul:last-child   li:before { content:"11[=10=]20"; }
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

参考文献：

What is the effect of content: "[=13=]20"; property?
http://nealchester.com/special-characters/#checkmarks

Answer 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>
然后将 SVG 放在 space (position: absolute; left: 0)

还有更多Font Awesome black icons。

检查此 CODEPEN 以了解如何添加颜色和更改颜色大小。

Answer 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: '13';
   }

Answer 5

只是想补充一点，对于陷入需要内联 css 的独特情况的任何人（例如在电子邮件客户端仍然需要内联 css 的群发电子邮件环境中），您可以使用list-style-type: none 并将其与您选择的项目符号的字符代码结合起来（下面使用复选标记），如下所示：

<ul style="list-style-type: none;">
  <li>&#10004; List Item 1</li>
  <li>&#10004; List Item 2</li>
  <li>&#10004; List Item 3</li>
  <li>&#10004; List Item 4</li>
</ul>

Answer 6

您还可以使用 ::marker 伪元素来设置列表项的标记。

不过 allowed CSS properties 的列表有些有限。

截至 2022 年 3 月的浏览器支持：91%（不支持 IE）

ul li::marker {
  content: '✓';
  color: green;
}

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

如何在无序列表中使用勾号/复选标记符号 (✓) 代替项目符号？

How to use tick / checkmark symbol (✓) instead of bullets in unordered list?

html

css

special-characters

jsFiddle