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

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

输出:

- abc

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

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


当前回答

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

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

其他回答

我的解决方案是在添加额外的span标签与mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

并添加到css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

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

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

喜欢。)

在我的例子中,将这些代码添加到CSS中

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

就足够了。很简单。

CSS:

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

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

HTML:

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

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

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

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