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

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

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

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:"\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

参考文献:

• 内容的影响是什么:"\ 0020"; 属性？
• http://nealchester.com/special-characters/#checkmarks

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

作为解决方案的补充：

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

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

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

ul {
  list-style: none;
}
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;
}

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

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

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

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

Answer 5

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

\n

其允许的 CSS 属性列表有些有限。

\n

截至 2022 年 10 月的浏览器支持率：94%（不支持 IE）

\n

\r\n

\r\n

ul li::marker {\n  content: \'\xe2\x9c\x93\';\n  color: green;\n}

\r\n

<ul>\n  <li>this is my text</li>\n  <li>this is my text</li>\n  <li>this is my text</li>\n  <li>this is my text</li>\n  <li>this is my text</li>\n</ul>

\r\n

\r\n

\r\n

\n