使用 ::marker 在 CSS 中使用 Unicode 字符作为项目符号

我最近在尝试<ul>在 HTML 页面上制作一些 s，通常当我想用表情符号或 SVG 或其他东西替换项目符号时，我会写类似这样的内容：

ul { list-style-type: none; }
ul li:before { content:"\2713"; }

这种方法确实有效，但对于较长的文本行，你会遇到一些间距问题。你可以修改列表周围的填充，并调整其位置来解决这个问题，但这需要大量的反复尝试。

输入，::marker伪元素！

这是一个非常酷炫、相对较新的解决方案！它可以选中列表项的标记框（也就是项目符号，或者如果你使用的是 ，则选中数字ol），然后你可以更改字体属性、颜色以及它周围的其他内容！

演示：

它与 Internet Explorer 以及其他一些旧版本的现代浏览器并不完全兼容。您可以在这里查看兼容性表格，并在这里查看相关文档！