Question

有没有办法用破折号在HTML中创建列表样式（即 - 或 - –或 - —），即

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

对外输出：

- abc

我用li:before { content: "-" };之类的东西来做这件事，虽然我不知道该选项的缺点（并且非常有必要提供反馈）。

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

Answer 1

有一个简单的修复（文本缩进）来保持缩进列表效果与:before伪类。

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Answer 2

您可以使用:before和content:时牢记IE 7或更低版本不支持此功能。如果您对此感到满意，那么这是您最好的解决方案。有关详细信息，请参阅Can I Use或QuirksMode CSS兼容性表。

在旧浏览器中应该使用的稍微有点麻烦的解决方案是使用图像作为项目符号点，并使图像看起来像破折号。有关示例，请参阅W3C list-style-image page。

Answer 3

使用此：

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Answer 4

这是一个没有任何位置相对或绝对且没有文本缩进的版本：

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

享受;）

Answer 5

ul {
  list-style-type: none;
}

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

demo fiddle

Answer 6

让我添加我的版本，主要是让我再次找到自己喜欢的解决方案：

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

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
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

Answer 7

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

Answer 8

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

您可以参考MDN

Answer 9

这是我的fiddle版本：

.generatedcontent上的（modernizr）类<html>实际上意味着IE8 +和其他所有理智的浏览器。

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS：

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

Answer 10

在我的情况下，将此代码添加到CSS

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

就够了。虽然很简单。

Answer 11

CSS：

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

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

HTML：

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

Answer 12

最佳答案之一对我不起作用，因为经过一番反复试验后，li：before还需要使用css规则display：inline-block。

这对我来说是一个完全可行的答案：

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

Answer 13

另一种方式：

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

Answer 14

使用dl (definition list) and 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，它完美无缺！

Answer 15

我的解决方案是在其中添加带有mdash的额外span标记：

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

Answer 16

我不知道是否有更好的方法，但您可以创建描绘短划线的自定义项目符号图形，然后让浏览器知道您要在列表中使用list-style-type属性。该页面上的示例显示了如何将图形用作子弹。

我从未尝试使用过：在你拥有之前，尽管它可能有效。缺点是一些旧的浏览器不支持它。我的直觉反应是，这仍然很重要，需要考虑。将来，这可能不那么重要。

编辑：我已经用OP的方法进行了一些测试。在IE8中，我无法使用该技术，因此它肯定还没有跨浏览器。此外，在Firefox和Chrome中，将list-style-type设置为none似乎被忽略。

Answer 17

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

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

Answer 18

对于今天遇到此问题的人来说，解决方案很简单：

list-style：＆＃34; - ＆＃34;

Answer 19

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

Answer 20

对我有用的是

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

HTML列表样式类型破折号

20 个答案: