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

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

246655 次浏览
小开
最佳答案

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

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>

小开

下面是你可以使用的三种不同的复选标记样式:

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

References:

小开

作为解决方案的补充:

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

您可以使用任何 SVG 图标作为内容 ，例如 < strong > Font Aswest 。

enter image description here

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.5米的空间
  • 然后将 SVG 放在该空间的开始位置(position: absolute; left: 0)

这里有更多的 字体超赞的黑色图标。

检查这个 < strong > CODEPEN 看看你如何添加颜色和改变他们的大小。

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

只是想补充一下，对于任何人陷入一个独特的情况下，内联 css 是必要的(如在大量的电子邮件上下文中，电子邮件客户端仍然需要内联 css) ，你可以使用一个列表样式类型: 无，并结合它与字符代码为您的项目符号选择(选中使用下面)像这样:

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

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

不过，它的 允许的 CSS 属性列表有些局限。

Browser support as of October 2022: 94% (no IE support)

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>

小开

截至2022年，我发现最容易使用的一个。它允许指定标记的颜色。 CSS 如下:

li::marker {
color: red;
content: "✓";
}

提交答案