3

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

4

2 回答 2

10

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

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

li {
  list-style-type: none;
}

li:before {
  content: '* ';
}

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

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

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

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

于 2013-10-30T22:05:18.877 回答
0

目前还有其他选择。

::marker CSS 伪元素：

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

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

在列表样式类型中使用文本：

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

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

于 2021-11-20T10:44:19.477 回答