有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)

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

输出:

- abc

我想到了用像li:before {content: "-"};这样的东西来做这件事,尽管我不知道这个选项的缺点(非常感谢反馈)。

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


当前回答

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

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

其他回答

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

您可以参考MDN

下面是一个没有任何相对或绝对位置,也没有文本缩进的版本:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

喜欢。)

对于今天遇到这个问题的人来说,解决方法很简单:

列表样式:"- "

对我有用的是

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

用这个:

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