HTML 列表样式类型的破折号

Question

有没有办法在 HTML 中用破折号创建列表样式(即 - 或 - – 或 - —)，即

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

输出:

- abc

我想到用 li:before { content: "-"}; 之类的东西来做这件事，虽然我不知道那个选项的缺点(并且非常有义务反馈)。

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

Answer 1

: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