html - 使用 · 而不是 <ul> 的元素符号

Question

我在 list-style-type property 上找到了一篇文章在 CSS 中，但它没有列出 · (·) 作为一个选项，而不是默认的 disc 或 • (•)。有没有办法用 HTML 或 CSS 做到这一点？

Answer 1

CSS(适用于任何支持 :before 和 content: 的浏览器):

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. */
}

注意:这不是真正的列表样式。因此，当你有包装列表时，它看起来会很有趣。这或许可以通过几个单位的负文本缩进来缓解，以使其更像列表样式。

---

另一种实现:

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

这个版本似乎工作得更好。我经常使用 :before 和 :after 来添加额外的东西，比如边框，但如果你要添加一个元素符号，我想情况并非如此。尽管这是替代建议，但它可能是首选建议。