Html 如何在无序列表中使用勾号/复选标记符号（？）而不是项目符号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34141950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use tick / checkmark symbol (?) instead of bullets in unordered list?
提问by Stack-overflow-hero
I have a list where I want to add tick symbol before list text. Is there any CSS that can help me to apply this way?
我有一个列表，我想在列表文本之前添加刻度符号。是否有任何 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
Note: I want this in this type of HTML code
注意：我想要这种类型的 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>回答by Josh Crozier
You can use a pseudo-elementto insert that character before each list item:
您可以使用伪元素在每个列表项之前插入该字符：
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>回答by Michael Benjamin
Here are three different checkmark styles you can use:
您可以使用以下三种不同的复选标记样式：
ul:first-child li:before { content:"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>
20"; } /* OR */
ul:nth-child(2) li:before { content:"14ul li:before {
content: '?';
}
20"; } /* OR */
ul:last-child li:before { content:"11ul {
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;
}
20"; }
ul { list-style-type: none; }<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>jsFiddle
js小提琴
References:
参考：
回答by Adam Orlov
As an addition to the solution:
作为解决方案的补充：
<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>
You can use any SVG icon as the content, such as the Font Aswesome.
您可以使用任何 SVG 图标作为内容，例如Font Aswesome。
ul {
list-style-type: '13';
}
Note: To solve the wrapping problem that other answers had:
注意：要解决其他答案的包装问题：
- we reserve 1.5m ems of space at the left of each
<li> - then position the SVG at the start of that space (
position: absolute; left: 0)
- 我们在每个左侧保留 1.5m ems 的空间
<li> - 然后将 SVG 放置在该空间的开头 (
position: absolute; left: 0)
Here are more Font Awesome black icons.
这里有更多Font Awesome 黑色图标。
Check this CODEPENto see how you can add colors and change their size.
检查此CODEPEN以了解如何添加颜色并更改其大小。
回答by Hitendra Singh Shekhawat
you can use this simple css style
你可以使用这个简单的 css 样式
##代码##