使用&middot; 而不是<ul>的子弹

ste*_*225 21 html css html-lists

我在CSS中找到了关于list-style-type属性的文章,但它没有列出· (·)作为选项,而不是默认disc或• (•).有没有办法用HTML或CSS做到这一点?

Lev*_*son 60

CSS(工作在任何浏览器支持:beforecontent:):

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it's a bullet. */
}
Run Code Online (Sandbox Code Playgroud)

警告:这不是真正的列表样式.因此,当你有包装列表时,它看起来很有趣.这可能可以通过几个单位的负文本缩进来减轻,以使其更像列表样式.


另一个实现:

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}
Run Code Online (Sandbox Code Playgroud)

这个版本似乎更好.我经常使用:before:after添加额外的东西,如边框,但如果你要添加一个子弹,我想,情况并非如此.虽然这是备用建议,但它可能是首选建议.