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

其他回答

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

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

2017-01-25 16:12:26

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

2017-03-14 18:41:32

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

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

2021-02-11 09:34:59

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

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

就足够了。很简单。

2017-01-10 19:21:17

ul {
  list-style-type: none;
}

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

演示小提琴

2014-06-18 07:06:04

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

推荐文章

最新文章

标签