8

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

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

问题是我想用large right arrow(►, ►) HTML 特殊字符替换项目符号，而不是使用list-style-image和三角形图像的组合。

是否可以？顺便说一句，如果这很重要，页面上已经加载了 jQuery，所以如果有帮助的话，使用它不会有问题。

4

4 回答 4

22

据我所知，使用list-style-type属性是不可能做到这一点的。

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

ul {
    list-style-type: none;
}

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

你可以在这里找到一个演示这个的 jsFiddle 。

于 2011-04-11T09:18:00.270 回答
5

@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>
于 2011-04-11T09:11:46.253 回答
3

如果您使用:before方法来获得列表样式，请考虑在列表中添加填充并为列表元素添加负边距以在换行符处获得相同的空间：

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

只需使用来自 30dot 的示例 postet 在 jsfiddle 中尝试

于 2014-05-12T20:16:09.873 回答
2

花了一段时间，但list-style-type: <string> 已经到达 Chromium。

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

于 2019-12-06T22:30:22.810 回答