Html Unicode 字符作为 CSS 中列表项的项目符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3203252/
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
Unicode character as bullet for list-item in CSS
提问by AntonAL
I need to use, for example, the star-symbol(★) as the bullet for a list-item.
例如，我需要使用星号(★) 作为列表项的项目符号。
I have read the CSS3 module: Lists, that describes, how to use custom text as bullets, but it's not working for me. I think, the browsers simply don't support the ::markerpseudo element.
我已经阅读了CSS3 模块：列表，它描述了如何使用自定义文本作为项目符号，但它对我不起作用。我认为，浏览器根本不支持::marker伪元素。
How can I do it, without using images?
在不使用图像的情况下，我该怎么做？
采纳答案by agbb
EDIT
编辑
I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:
我可能不会再推荐使用图像了。我会坚持使用 Unicode 字符的方法，如下所示：
li:before {
content: "05";
}
OLD ANSWER
旧答案
I'd probably go for an image background, they're much more efficientversatile and cross-browser-friendly.
我可能会去的图像背景，他们更高效灵活，跨浏览器友好。
Here's an example:
下面是一个例子：
<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
回答by 222
Using Text As Bullets
使用文本作为项目符号
Use li:beforewith an escaped Hex HTML Entity (or any plain text).
使用li:before与十六进制转义HTML实体（或纯文本）。
Example
例子
My example will produce lists with check marks as bullets.
我的示例将生成带有复选标记的列表作为项目符号。
CSS:
CSS:
ul {
list-style: none;
padding: 0px;
}
ul li:before
{
content: '13';
margin: 0 1em; /* any design */
}
Browser Compatibility
浏览器兼容性
Haven't tested myself, but it should be supported as of IE8. At least that's what quirksmode& css-trickssay.
我自己没有测试过，但应该从 IE8 开始支持它。至少这就是quirksmode和css-tricks所说的。
You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with <noscript>for the images.
您可以使用条件注释来应用较旧/较慢的解决方案，例如图像或脚本。更好的是，将两者都<noscript>用于图像。
HTML:
HTML:
<!--[if lt IE 8]>
*SCRIPT SOLUTION*
<noscript>
*IMAGE SOLUTION*
</noscript>
<![endif]-->
About background images
关于背景图片
Background images are indeed easy to handle, but...
背景图片确实很容易处理，但是......
- Browser support for
background-sizeis actually only as of IE9. - HTML text colors and special (crazy) fonts can do a lot, with less HTTP requests.
- A script solution can just inject the HTML Entity, and let the same CSS do the work.
- A good resetting CSS code might make
list-style(the more logical choice) easier.
- 浏览器支持
background-size实际上仅从 IE9 开始。 - HTML 文本颜色和特殊（疯狂）字体可以做很多事情，而且 HTTP 请求更少。
- 脚本解决方案可以只注入 HTML 实体，并让相同的 CSS 完成工作。
- 一个好的重置 CSS 代码可能会使
list-style（更合乎逻辑的选择）更容易。
Enjoy.
享受。
回答by defann
You can construct it:
你可以构造它：
#modal-select-your-position li {
/* handle multiline */
overflow: visible;
padding-left: 17px;
position: relative;
}
#modal-select-your-position li:before {
/* your own marker in content */
content: "—";
left: 0;
position: absolute;
}
回答by PHPst
This is the W3C solution. You can use it in 3012!
这是 W3C 解决方案。你可以在3012中使用它！
ul { list-style-type: "*"; } /* Sets the marker to a "star" character */
ul { list-style-type: "*"; } /* Sets the marker to a "star" character */
回答by NicolasBernier
Images are not recommended since they may appear pixelated on some devices (Apple devices with Retina display) or when zoomed in. With a character, your list looks awesome everytime.
不推荐使用图像，因为它们在某些设备（具有 Retina 显示屏的 Apple 设备）或放大时可能会出现像素化。使用字符，您的列表每次都看起来很棒。
Here is the best solution I've found so far. It works great and it's cross-browser (IE 8+).
这是我迄今为止找到的最佳解决方案。它运行良好，并且是跨浏览器（IE 8+）。
ul {
list-style: none;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "?";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}
The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line. 1.2emis the width you want for your character, change it for your needs. Don't forget to reset padding and margin for ul and li elements.
重要的是将字符放在一个具有固定宽度的浮动块中，这样如果文本太长而无法放在一行中，则文本保持对齐。 1.2em是你想要的角色宽度，根据你的需要改变它。不要忘记为 ul 和 li 元素重置填充和边距。
EDIT: Be aware that the "1.2em" size may vary if you use a different font in ul and li:before. It's safer to use pixels.
编辑：请注意，如果您在 ul 和 li:before 中使用不同的字体，“1.2em”大小可能会有所不同。使用像素更安全。
回答by Dirk
To add a star use the Unicode character 22C6.
要添加星号，请使用 Unicode 字符22C6。
I added a space to make a little gap between the liand the star. The code for space is A0.
我添加了一个空间li，在星星和星星之间留出一点空隙。空间的代码是A0。
li:before {
content: 'C6\A0';
}
回答by pospi
A more complete example of 222's answer:
222答案的更完整示例：
ul {
list-style:none;
padding: 0 0 0 2em; /* padding includes space for character and its margin */
/* IE7 and lower use default */
*list-style: disc;
*padding: 0 0 0 1em;
}
ul li:before {
content: 'BA';
font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
margin: 0 1em 0 -1em; /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */
/* IE7 and lower use default */
*content: none;
*margin: 0;
}
ul li {
text-indent: -1em; /* negative text indent brings first line back inline with the others */
/* IE7 and lower use default */
*text-indent: 0;
}
I have included star-hack properties to restore the default list styles in older IE versions. You could pull these out and include them in a conditional include if desired, or replace with a background-image based solution. My humble opinion is that special bullet styles implemented in this manner should degrade gracefully on the few browsers that don't support pseudoselectors.
我已经包含了 star-hack 属性来恢复旧 IE 版本中的默认列表样式。如果需要，您可以将它们拉出并将它们包含在条件包含中，或者替换为基于背景图像的解决方案。我的拙见是，以这种方式实现的特殊项目符号样式应该在少数不支持伪选择器的浏览器上优雅地降级。
Tested in Firefox, Chrome, Safari and IE8-10 and renders correctly in all.
在 Firefox、Chrome、Safari 和 IE8-10 中测试并正确呈现。
回答by Iacchus
ul {
list-style-type: none;
}
ul li:before {
content:'*'; /* Change this to unicode as needed*/
width: 1em !important;
margin-left: -1em;
display: inline-block;
}
回答by Beerswiller
I've been through this whole list and there are partially correct and partially incorrect elements right through, as of 2020.
到 2020 年，我已经浏览了整个列表，并且有部分正确和部分错误的元素。
I found that the indent and offset was the biggest problem when using UTF-8, so I'm posting this as a 2020 compatible CSS solution using the "upright triangle" bullet as my example.
我发现缩进和偏移是使用 UTF-8 时最大的问题，因此我将其作为 2020 兼容的 CSS 解决方案发布，使用“直立三角形”项目符号作为示例。
ul {
list-style: none;
text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}
ul li:before {
content: "B2";
margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}
use emas the unit to avoid conflict with font sizing
利用em为单位与字体大小避免冲突
回答by Charaf JRA
Try this code...
试试这个代码...
li:before {
content: "→ "; /* caractère UTF-8 */
}
