用这个:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

用这个:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

有一个简单的修复(文本缩进)来保持缩进列表效果，在伪类之前使用:。

ul { 保证金:0; ｝ ul。{破灭 list-style-type:没有; ｝ ul。虚线> li { indent: 5 px; ｝ ul。虚线> li:before { 内容:“-”; indent: 5 px; ｝ 一些文本 < ul类=“冲”> <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > < ul > <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > 最后的文本

当使用键盘上不存在的符号时，请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号，请参阅HTML字符实体引用中的CSS代码列表。 对于键盘上的符号，直接使用键盘符号作为list-style-type属性的值。

参见下面的示例代码:

<！——查看HTML实体的符号不是在键盘上——> <h3>HTML实体:长向右双箭头</h3> <ul style="list-style-type: '\27F9';"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul > <！——直接使用键盘上的符号——> <h3>键盘上的破折号</h3> <ul style=" font - family:宋体;"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul >

上面的一个答案不适合我，因为，经过一点点的尝试和错误，li:before也需要css规则display:inline-block。

所以这对我来说是一个完全可行的答案:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

ul {
  list-style-type: '-';
}

您可以参考MDN