使用文本作为项目符号

Question

我需要使用星号（★）作为列表项的子弹。

我已阅读CSS3 module: Lists，其中介绍了如何将自定义文字用作项目符号，但这对我不起作用。我认为，浏览器根本不支持::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＆amp; css-tricks说。

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

HTML ：



关于背景图片

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

background-size的浏览器支持实际上仅限于IE9。

HTML文本颜色和特殊（疯狂）字体可以用很少的HTTP请求做很多事情。

脚本解决方案只需注入HTML实体，让相同的CSS完成工作。

一个好的重置CSS代码可能会使list-style（更合乎逻辑的选择）更容易。

享受。

Answer 2

修改

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

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

OLD ANSWER

我可能会选择图像背景，它们更有效率多功能且跨浏览器友好。

以下是一个例子：

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

要添加星标，请使用Unicode字符22C6。

我添加了一个空格，以便在li和星星之间留出一点空隙。空间代码为A0。

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

Answer 7

222's answer的更完整示例：

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: '\25BA';
    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;
}

我已经包含了star-hack属性来恢复旧版IE中的默认列表样式。如果需要，您可以将它们拉出来并将它们包含在条件包含中，或者替换为基于背景图像的解决方案。我的拙见是，以这种方式实现的特殊子弹样式应该在少数不支持伪选择器的浏览器上优雅地降级。

在Firefox，Chrome，Safari和IE8-10中测试过并正确渲染。

Answer 8

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Answer 9

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

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

Answer 10

我遍历了整个清单，截至2020年为止，部分正确和部分不正确的元素。

我发现使用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: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

使用em作为单位，以避免与字体大小冲突

Answer 11

试试这段代码......

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Answer 12

此主题可能很旧，但这是一个快速解决方法 ul {list-style:outside none square;}或 ul {list-style:outside none disc;}等等......

然后将左边距添加到列表元素

ul li{line-height: 1.4;padding-bottom: 6px;}

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

12 个答案:

使用文本作为项目符号