有没有办法在 HTML 中用破折号创建列表样式（即 - 或 - – 或 - —），即
<ul>
<li>abc</li>
</ul>
输出：
- abc
我想到用li:before { content: "-" }; 之类的东西来做这件事，虽然我不知道那个选项的缺点（并且非常有义务提供反馈）。
更一般地说，我不介意知道如何将通用字符用于列表项。
【问题讨论】：
标签： html css xhtml html-lists
ul {
list-style-type: '-';
}
可以参考MDN
【讨论】：
你可以像这样设置 li::marker：
li::marker {
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;
}`
【讨论】：
最佳答案之一对我不起作用，因为经过一点点反复试验，li:before 还需要 css 规则 display:inline-block。
所以这对我来说是一个完全有效的答案：
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
【讨论】：
让我也添加我的版本，主要是让我再次找到自己喜欢的解决方案：
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>【讨论】：
对我有用的是
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
【讨论】：
对于今天遇到此问题的任何人，解决方案很简单：
列表样式：“-”
【讨论】：
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
【讨论】：
在我的例子中，将此代码添加到 CSS
ul {
list-style-type: '- ';
}
够了。很简单。
【讨论】：
CSS：
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML：
<ul>
<li>foo</li>
<li>bar</li>
</ul>
【讨论】：
使用这个：
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
【讨论】：
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示fiddle
【讨论】：
这是我的fiddle 版本：
<html> 上的 (modernizr) 类 .generatedcontent 实际上意味着 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;
}
【讨论】：
: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【讨论】：
list-style-type: none; 放到<ul> 元素中。
ul li:before{ content:"- ";}
display: block; float: left; 添加到li:before，这样可以更轻松地将其从内容流中拉出来，否则很难/错误地让第一行和后续行正确排列。或者张克言的回答也是用绝对定位来做到这一点的。
list-style-type dash 已经不是 CSS 的一部分了
您可以使用:before 和content:，记住这在IE 7 或更低版本中不受支持。如果您对此感到满意，那么这是您最好的解决方案。请参阅Can I Use 或QuirksMode CSS 兼容性表了解完整详情。
应该在旧版浏览器中使用的稍微糟糕的解决方案是使用图像作为项目符号点，并让图像看起来像破折号。有关示例，请参阅W3C list-style-image page。
【讨论】：
:before 的问题是，当列表项跨越多行时，第 2 行的缩进从破折号所在的位置开始，从而破坏了缩进的列表效果。您需要使用悬挂缩进来避免这种情况。看到这个：alistapart.com/articles/taminglists
content 使用 content: "\2014\a0"
这是一个没有任何相对或绝对位置且没有文本缩进的版本：
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
享受;)
【讨论】：
display: block; float: left; 添加到li:before 中，这样可以更轻松地将其从内容流中拉出来，否则很难/错误地让第一行和后续行正确排列。或者张克言的回答也是用绝对定位来做到这一点的。
.active 类与li:before { visibility: hidden; } 和li.active:before { visibility: visible; }
另一种方式：
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;
}
【讨论】：
使用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，而且效果很好！
【讨论】：
我的解决方案是在其中添加带有 mdash 的额外 span 标签：
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</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;
}
【讨论】：
我不知道是否有更好的方法，但您可以创建一个描绘破折号的自定义项目符号点图形，然后通过list-style-type 属性让浏览器知道您想在列表中使用它。该页面上的示例显示了如何将图形用作项目符号。
我从未尝试过以您的方式使用 :before，尽管它可能会起作用。缺点是一些较旧的浏览器不支持它。我的直觉反应是，这仍然很重要，值得考虑。将来，这可能不再那么重要了。
编辑：我对 OP 的方法做了一些测试。在 IE8 中，我无法使用该技术，因此它肯定还不是跨浏览器。此外，在 Firefox 和 Chrome 中，将 list-style-type 设置为 none 似乎会被忽略。
【讨论】：