是否可以对<li>标签项目符号使用自定义文本？

Question

我想用一个字符而不是一个图片来表示li标签。我在谷歌上找不到任何帮助。
我知道list-style-image: url(myimage.gif)但我不想使用图片，因为它不可扩展，而且在视网膜上看起来也不好。

Answer 1

你的意思是"我可以使用一些文本而不是项目符号或图像吗"？

如果是这样，CSS :before伪元素可以帮助：

li {
  list-style-type: none;
}
li:before {
  content: '* ';
}

显然，将"*"替换为您选择的文本。

您可以在:before元素上使用普通 CSS 来根据需要设置样式。例如：

li:before {
  content: '> ';
  font-family: 'wingdings';
  font-weight:  bold;
}

您可以通过将此技术与 SVG 字体（如 Font Awesome）结合使用来获得可缩放的图形。

Answer 2

目前还有其他选择。

：：marker CSS 伪元素：

li::marker {
    content: '> ';
    color: red;
    font-size: 1.5em;
}

（但是，：：marker 似乎在 Safari 上并不完全受支持：https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility）

使用列表样式类型的文本：

li {
  list-style-type: '> ';
}

关于这个主题的很好的参考：https://web.dev/css-marker-pseudo-element/