如何使用勾号/对勾符号（✓）代替无序列表中的项目符号？

82

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

— 堆栈溢出英雄
source

144

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

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>

展开摘要

— 乔什·克罗齐耶（Josh Crozier）
source

我使用了它，并且可以在Chrome 65中使用。我通常可以使用1px的实线边框包装每个<li>，在ul li上向左浮动和向右空白：之前-您可以将边框颜色设置为元素的背景。

— ymasood '18年

感谢您的解决方案！我添加了一条说明，即在包装时缩进会丢失。（对帖子进行编辑的歉意，但比起发表评论，它更能说明问题，希望我们能找到一种解决方法。）

— Dan Dascalescu

@Josh：亚当的答案可以解决包装问题。为了清楚起见，我对其进行了编辑，直到您将其包括在内。

— Dan Dascalescu

32

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

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

参考文献：

— 迈克尔·本杰明
source

这与乔什·克罗齐耶（Josh Crozier）的回答没什么不同，并且遭受破坏包装上的压痕的相同问题。另外，Chromium / Ubuntu上的小提琴中也没有显示最后一个字符，但是无论如何，这都不重要-乔什的答案是解决方案的要点。使用哪些复选标记字符是一种设计选择。

— Dan Dascalescu

1

@DanDascalescu，此答案通过提供某些人可能不知道的复选标记选项扩展了Josh Crozier的解决方案。那是有价值的信息。它们是“设计选择”，这一事实并不会使该答案的用处不大。我认为您的否决票是没有根据的，因为：（1）答案对很多人都有用（并且有近30票赞成票），（2）答案不假装除了样式选择之外，而且（3）我并没有尝试解决任何其他问题（正如您所说的，“仍然超出了重点”）

— Michael Benjamin

1

我看到的复选标记选择“ \ 2713”和“ \ 2714”是原始Unicode代码点。我看不到它们的外观。如果答案要提供样式选择，则可以包括一些实际的复选标记：✓，✔，☑，✅。使用什么复选标记不是一个有趣的问题。如何使用复选标记。我将其视为“如何绘制目前在水中的船”与“可以绘制出什么样的蓝色阴影”。那有意义吗？

— Dan Dascalescu

您有权从任何角度查看此答案。我不会同意你的意见。但是事实是，访问此职位的绝大多数人都认为此答案有用。我就这样吧。感谢您的反馈。@DanDascalescu

— Michael Benjamin

2

人们投票的原因很多。人们投票的理由与您不同。您不同意此答案的内容。您并不是说答案是错误的或过时的（就像您引用的链接一样），您只是不喜欢它。这对我来说没问题。您有权发表自己的意见。

— 迈克尔·本杰明

22

作为解决方案的补充：

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>

展开摘要

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

我们在每个左侧保留1.5m ems的空间 <li>
然后将SVG定位在该空间的开头（position: absolute; left: 0）

这里有更多的字体真棒黑色图标。

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

— 亚当·奥尔洛夫（Adam Orlov）
source

6

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

— 希滕德拉·辛格·谢卡瓦
source

亚当的答案涉及到包装问题，但是这花了很多额外的代码……这确实可行。间距对我来说是个小问题，所以我最终在其末尾添加了一个额外的\ 1 \ 1，以使选中标记与<li>隔开。

— Jaden Baptista