HTML 列表样式破折号

Question

有没有一种方法可以用短划线在 HTML 中创建列表样式（即 - 或 – – 或 — — ）即

<ul>
  <li>abc</li>
</ul>

输出：

 - abc

我想到用 li:before { content: "-" }; 类的东西来做这件事，尽管我不知道那个选项的缺点（并且非常乐意提供反馈）。

更一般地说，我不介意知道如何为列表项使用通用字符。

原文由 Brian M. Hunt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 :before 和 content: 记住，这在 IE 7 或更低版本中不受支持。如果您对此表示满意，那么这是您最好的解决方案。有关完整详细信息，请参阅 我可以使用 或 QuirksMode CSS 兼容性表。

应该在旧版浏览器中工作的稍微麻烦的解决方案是使用图像作为要点，并使图像看起来像破折号。有关示例，请参见 W3C list-style-image 页面。

原文由 Darko 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一个简单的修复（文本缩进）来保持缩进列表效果与 :before 伪类。

 ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

 Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

原文由 aron.lakatos 发布，翻译遵循 CC BY-SA 3.0 许可协议