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

【问题标题】：Is it possible to use custom text for the <li> tag bullet?是否可以为 <li> 标签项目符号使用自定义文本？
【发布时间】：2013-11-10 18:12:28
【问题描述】：

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

【问题讨论】：

【解决方案1】：

目前还有其他选择。

::marker CSS 伪元素：

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

在列表样式中使用文本：

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

【讨论】：

【解决方案2】：

你的意思是“我可以用一些文字代替项目符号或图像吗”？

如果是这样，css :before pseudo-element 可以提供帮助：

li {
  list-style-type: none;
}

li:before {
  content: '* ';
}

显然用您选择的文本替换“*”。

您可以在 :before 元素上使用普通 CSS 来设置您喜欢的样式。例如：

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

您可以通过将此技术与Font Awesome 之类的 SVG 字体相结合来获得可缩放的图形。

【讨论】：