Question

我想自定义无序列表项的显示方式。

我知道我可以使用list-style-type在none，disc，circle，square和其他或多或少受支持的值之间进行更改。我也知道可以将指定图像的列表标记的默认外观更改为list-style-image属性。

问题在于我想用large right arrow（►，►）HTML特殊字符替换子弹，而不是使用list-style-image和三角形图像的组合。

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

感谢。

- 编辑 -

谢谢，我会使用一个版本或另一个版本，具体取决于它需要支持哪个浏览器。顺便说一下，这两个答案都很棒而且不得不判定哪一个是“赢家”并不容易，所以我先选择了答案。

Answer 1

据我所知，使用list-style-type属性无法做到这一点。

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

ul {
    list-style-type: none;
}

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

你可以找到一个jsFiddle来演示这个here。

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>

Answer 3

如果使用:before方法让列表样式考虑在列表中添加填充，并在list-element中添加负边距以在换行时获得相同的空间：

ul {
    list-style: none;
    padding: 0 0 0 24px
}
ul > li:before {
    content: '\25BA';
    float: left;
    margin-left: -24px
}

只需使用thirtydot中的示例postet即可试用jsfiddle

Answer 4

花了一段时间，但list-style-type: <string> has arrived in Chromium。

允许样式表对列表样式使用任意字符标记。

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

4 个答案: