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

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

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

输出:

- abc

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

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

当前回答

另一种方法:

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

其他回答

CSS:

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

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

HTML:

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

2015-06-27 05:56:11

使用dl(定义列表)和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，它的工作完美!

2013-04-23 02:20:22

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

2017-03-14 18:41:32

另一种方法:

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 {
  list-style-type: none;
}

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

演示小提琴

2014-06-18 07:06:04

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

推荐文章

最新文章

标签