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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle

参考文献：

Answer 3

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

Answer 4

另外：

您可以使用更好的复选标记 https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/check.svg或其他字体中很棒的图标，使用

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

解决方案

尝试一下：

ul {
   list-style: none;
}
li {
  position: relative;
  padding-left: 40px;
}
li:before {
  position: absolute;
  top: 5px;
  left: 0;
  content: ' ';
  width: 50px;
  height: 50px;
  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;
}

在这里您可以找到可以使用的所有图标： https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

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

4 个答案:

jsFiddle