html编写 项目符号,html - Unicode字符作为C中列表项的项目符号

html - Unicode字符作为C中列表项的项目符号

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

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

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

AntonAL asked 2019-08-06T18:18:23Z

10个解决方案

102 votes

使用文本作为项目符号

将list-style与转义的十六进制HTML实体(或任何纯文本)一起使用。

例

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

CSS：

ul {

list-style: none;

padding: 0px;

}

ul li:before

{

content: '\2713';

margin: 0 1em; /* any design */

}

浏览器兼容性

Haven没有对自己进行过测试，但是从IE8开始应该支持它。至少那是什么quirksmode＆amp; css-tricks说。

您可以使用条件注释来应用较旧/较慢的解决方案，如图像或脚本。 更好的是，使用list-style作为图像。

HTML：

关于背景图片

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

浏览器对list-style的支持实际上仅限于IE9。

HTML文本颜色和特殊(疯狂)字体可以做很多事情，减少HTTP请求。

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

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

请享用。

222 answered 2019-08-06T18:20:28Z

68 votes

编辑

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

li:before {

content: "\2605";

}

老答复

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

这是一个例子：

ul {list-style:none;} /* you should use a css reset too... ;) */

ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}

• List Item 1
• List Item 2
• List Item 3

agbb answered 2019-08-06T18:18:46Z

32 votes

你可以构建它：

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

}

defann answered 2019-08-06T18:20:52Z

16 votes

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

ul { list-style-type: "★"; }

/* Sets the marker to a "star" character */

[https://drafts.csswg.org/css-lists/#text-markers]

PHPst answered 2019-08-06T18:21:31Z

11 votes

不建议使用图像，因为它们在某些设备(带有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元素的填充和边距。

编辑：请注意＆＃34; 1.2em＆＃34; 如果你在ul和li中使用不同的字体，大小可能会有所不同：之前。 使用像素更安全。

NicolasBernier answered 2019-08-06T18:22:14Z

6 votes

要添加星号，请使用Unicode字符li。

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

li:before {

content: '\22C6\A0';

}

Dirk answered 2019-08-06T18:22:47Z

4 votes

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

• */

/* 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中进行了测试，并且可以正确渲染。

pospi answered 2019-08-06T18:23:26Z

2 votes

ul {

list-style-type: none;

}

ul li:before {

content:'*'; /* Change this to unicode as needed*/

width: 1em !important;

margin-left: -1em;

display: inline-block;

}

Iacchus answered 2019-08-06T18:23:44Z

0 votes

试试这个代码......

li:before {

content: "→ "; /* caractère UTF-8 */

}

Charaf JRA answered 2019-08-06T18:24:04Z

-1 votes

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

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

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

user2415803 answered 2019-08-06T18:24:36Z