list-style-type CSS属性的文本值,如何？

Question

我想自定义无序列表的项目呈现方式.

我知道我可以使用list-style-type来改变之间none,disc,circle,square等或多或少支持的值.我也知道可以将指定图像的列表标记的默认外观更改为list-style-image属性.

问题是我想用large right arrow(►,►)HTML特殊字符替换子弹而不是使用list-style-image三角形图像的组合.

可能吗？顺便说一句,如果这很重要jQuery已经加载到页面上,所以如果这可以帮助它就不会有问题.

谢谢.

- 编辑 -

谢谢,我将使用一个版本或另一个版本,具体取决于它需要支持哪个浏览器.顺便说一下,这两个答案都很棒并且必须判定哪一个是"赢家"并不容易,所以我选择了先给出的答案.

Answer 1

据我所知,使用list-style-type属性不可能做到这一点.

但是,如果您的浏览器支持:在 CSS选择器之前,您可以使用它在列表项之前插入项目符号实体.您只需要将实体代码转换为十六进制:

ul {
    list-style-type: none;
}

li:before {
    content: "\25ba\00a0";
}

你可以在这里找到一个jsFiddle来证明这一点.

Answer 2

@Frederic显示了一个我可以使用的有趣解决方法，除非您必须支持IE6和7-在那种情况下，您必须处理一个包含字符的普通HTML元素，并对其样式进行设置正确的地方。

就像是

ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }

<li>
 <div class="bullet">&#9658;</div>
 List item 1
</li>