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

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

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

HTML

<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple</li>
  <li>Approach!</li>
</ul>

CSS

ul {
  list-style-type: none;
}

ul li:before {
  content: '-';
  position: absolute;
  margin-left: -20px;
}`

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

让我再加上我自己的版本，主要是为了让我再次找到自己喜欢的解决方案:

ul { list-style-type: none; /*use padding to move list item from left to right*/ padding-left: 1em; } ul li:before { content: "–"; position: absolute; /*change margin to move dash around*/ margin-left: -1em; } <!-- Just use the following CSS to turn your common disc lists into a list-style-type: 'dash' Give credit and enjoy! --> Some text <ul> <li>One</li> <li>Very</li> <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> <li>Approach!</li> </ul>

https://codepen.io/burningTyger/pen/dNzgrQ

你可以使用:before和content:，记住这在ie7或以下版本中是不支持的。如果你同意，那么这就是你最好的解决方案。详见Can I Use或QuirksMode CSS兼容性表。

在老版本的浏览器中，还有一种稍微糟糕一点的解决方案，那就是使用图像作为项目符号，并使图像看起来像一个破折号。有关示例，请参阅W3C列表样式的图像页面。