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

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

输出:

- abc

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

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


当前回答

HTML

<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple</li>
  <li>Approach!</li>
</ul>

CSS

ul {
  list-style-type: none;
}

ul li:before {
  content: '-';
  position: absolute;
  margin-left: -20px;
}`

其他回答

ul {
  list-style-type: none;
}

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

演示小提琴

我不知道是否有更好的方法,但是您可以创建一个描述破折号的自定义项目符号图形,然后通过list-style-type属性让浏览器知道您想在列表中使用它。该页上的一个示例展示了如何使用图形作为项目符号。

我从来没有试过用你的方法,虽然它可能有用。缺点是一些较老的浏览器不支持它。我的本能反应是,这一点仍然很重要,值得考虑。在未来,这可能不那么重要了。

编辑:我已经用OP的方法做了一些测试。在IE8中,我无法让这项技术发挥作用,所以它肯定还不能跨浏览器。此外,在Firefox和Chrome中,同时将list-style-type设置为none似乎会被忽略。

HTML

<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple</li>
  <li>Approach!</li>
</ul>

CSS

ul {
  list-style-type: none;
}

ul li:before {
  content: '-';
  position: absolute;
  margin-left: -20px;
}`

当使用键盘上不存在的符号时,请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号,请参阅HTML字符实体引用中的CSS代码列表。 对于键盘上的符号,直接使用键盘符号作为list-style-type属性的值。

参见下面的示例代码:

<!——查看HTML实体的符号不是在键盘上——> <h3>HTML实体:长向右双箭头</h3> <ul style="list-style-type: '\27F9';"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul > <!——直接使用键盘上的符号——> <h3>键盘上的破折号</h3> <ul style=" font - family:宋体;"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul >

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

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

就足够了。很简单。