首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >作为CSS中列表项的项目符号的Unicode字符

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

Stack Overflow用户
提问于 2010-07-08 19:55:58
回答 8查看 151.8K关注 0票数 122

例如,我需要使用星号(★)作为列表项的项目符号。

我读过CSS3 module: Lists,它描述了如何使用自定义文本作为项目符号,但它对我不起作用。我认为,浏览器根本不支持::marker伪元素。

我怎么才能做到这一点,不使用图像?

EN

回答 8

Stack Overflow用户

发布于 2013-01-13 16:36:44

您可以构建它:

代码语言:javascript
复制
#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;
}
代码语言:javascript
复制
<ul id="modal-select-your-position">
  <li>First item</li>
  <li>Second item</li>
</ul>

票数 35
EN

Stack Overflow用户

发布于 2013-08-30 20:55:07

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

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

代码语言:javascript
复制
li:before {
    content: '\22C6\A0';
}
票数 7
EN

Stack Overflow用户

发布于 2013-07-18 10:07:57

更完整的222's answer示例

代码语言:javascript
复制
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中测试,所有渲染都是正确的。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3203252

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档