HTML列表-样式-类型破折号

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

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

输出:

- abc

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

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

当前回答

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

演示小提琴

2014-06-18 07:06:04

其他回答

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

列表样式:"- "

2017-12-08 11:05:33

我的解决方案是在添加额外的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;
}

2013-01-11 15:37:01

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

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

喜欢。)

2013-05-12 11:49:15

另一种方法:

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;    
}

2014-02-14 05:40:56

对我有用的是

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

2018-03-23 15:58:02

HTML列表-样式-类型破折号

推荐文章

最新文章

标签