Unicode字符作为CSS中列表项的项目符号

Question

例如,我需要使用星号(★)作为列表项的子弹.

我已经阅读了CSS3模块:列表,描述了如何使用自定义文本作为项目符号,但它对我不起作用.我认为,浏览器根本不支持::marker伪元素.

如何在不使用图像的情况下进行操作？

Answer 1

使用文本作为项目符号

使用li:before与十六进制转义HTML实体(或纯文本).

例

我的示例将生成带有复选标记的列表作为项目符号.

CSS:

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

浏览器兼容性

没有测试过自己,但从IE8开始应该支持它.至少那就是quirksmode和css-tricks所说的.

您可以使用条件注释来应用较旧/较慢的解决方案,如图像或脚本.更好的是,同时使用<noscript>图像.

HTML:

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

关于背景图片

背景图片确实很容易处理,但......

1. 浏览器支持background-size实际上只是IE9的支持.
2. HTML文字颜色和特殊(疯狂)字体可以做很多事情,减少HTTP请求.
3. 脚本解决方案可以只注入HTML实体,让相同的CSS完成工作.
4. 一个好的重置CSS代码可能会使list-style(更合乎逻辑的选择)更容易.

请享用.

Answer 2

编辑

我可能不会再推荐使用图像了.我坚持使用Unicode字符的方法,如下所示:

li:before {
  content: "\2605";
}

老答复

我可能会选择图像背景,它们更加高效,多功能,跨浏览器友好.

这是一个例子:

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

Answer 3

你可以构建它:

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

Answer 4

这是W3C解决方案.你可以在3012年使用它!

ul { list-style-type: "?"; }
/* Sets the marker to a "star" character */

https://drafts.c​​sswg.org/css-lists/#text-markers

Answer 5

不建议使用图像,因为它们在某些设备(带有Retina显示屏的Apple设备)上或放大时可能会出现像素图.使用字符时,您的列表每次都会显得很棒.

这是迄今为止我发现的最佳解决方案.它运行良好,它是跨浏览器(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;
}

重要的是将字符放在具有固定宽度的浮动块中,以便如果文本太长而无法放在单行上,则文本保持对齐. 1.2em是您想要角色的宽度,根据您的需要进行更改.不要忘记重置ul和li元素的填充和边距.

编辑:请注意,如果您在ul和li中使用不同的字体,"1.2em"大小可能会有所不同:之前.使用像素更安全.

Answer 6

今天，有一个::marker选择。所以，

li::marker {
  content: "\2605";
}

Answer 7

要添加星号,请使用Unicode字符22C6.

我添加了一个空间,以便li在星星和星星之间留下一点空隙.空间代码是A0.

li:before {
    content: '\22C6\A0';
}