例如,我需要使用星号(★)作为列表项的项目符号。
我读过CSS3 module: Lists,它描述了如何使用自定义文本作为项目符号,但它对我不起作用。我认为,浏览器根本不支持::marker
伪元素。
我怎么才能做到这一点,不使用图像?
发布于 2013-01-13 16:36:44
您可以构建它:
#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;
}
<ul id="modal-select-your-position">
<li>First item</li>
<li>Second item</li>
</ul>
发布于 2013-08-30 20:55:07
要添加星号,请使用Unicode字符22C6
。
我添加了一个空间,以便在li
和星星之间留出一点空隙。空格的代码是A0
。
li:before {
content: '\22C6\A0';
}
发布于 2013-07-18 10:07:57
更完整的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中测试,所有渲染都是正确的。
https://stackoverflow.com/questions/3203252
复制相似问题