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

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

输出:

- abc

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

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


当前回答

你可以像这样设置li::marker:

li::marker {
   content: '- ';
}

其他回答

另一种方法:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

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

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
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

使用dl(定义列表)和dd代替lu li。 <dd>可以使用标准的CSS样式来定义,例如{color:blue;font-size:1em;},并且可以使用放在HTML标记后的任何符号作为标记。它的工作方式类似于ul li,但允许您使用任何符号,您只需缩进它就可以获得通常使用ul li获得的缩进列表效果。

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

给你更干净的代码!这样,你可以使用任何类型的字符作为标记!缩进大约是-10px,它的工作完美!

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

您可以参考MDN