HTML列表样式types的短划线
有没有办法用短划线（即 – 或 – –或 – — ）在HTML中创build列表样式
<ul> <li>abc</li> </ul>
输出：
- abc
我发现这样做的东西像li:before { content: "-" }; ，虽然我不知道这个选项的缺点（并且会有很多反馈意见）。
更一般地说，我不介意如何使用列表项的通用字符。
您可以使用:before和content:注意，这在IE 7或以下版本中不受支持。 如果你确定，那么这是你最好的解决scheme。 请参阅我可以使用或QuirksMode CSS兼容性表格的全部细节。
在较旧的浏览器中应该是一个稍微难看的解决scheme，就是使用图像作为子弹点，并使图像看起来像破折号。 有关示例，请参阅W3C list-style-image页面 。
有一个简单的修复（文本缩进）来保持缩进列表效果与: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
用这个：
ul { list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw=='); }
这是一个没有任何相对或绝对位置的版本，没有文本缩进：
ul.dash { list-style: none; margin-left: 0; padding-left: 1em; } ul.dash > li:before { display: inline-block; content: "-"; width: 1em; margin-left: -1em; }
请享用 ;）
ul { list-style-type: none; } ul > li:before { content: "–"; /* en dash */ position: absolute; margin-left: -1.1em; }
演示小提琴
这是我的小提琴版本：
（modernizr）类。生成内容实际上是指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; }
让我添加我的版本，主要是为我find我自己的首选解决scheme：
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; }
“`
ul { margin:0; list-style-type: none; } li:before { content: "- ";}
我不知道是否有更好的方法，但是你可以创build一个描述破折号的自定义项目符号点graphics，然后让浏览器知道你想在列表中使用list-style-type属性。 该页面上的一个示例显示了如何将graphics用作项目符号。
我从来没有尝试过使用：以前的方式，虽然它可能工作。 缺点是一些较旧的浏览器不支持它。 我的直觉反应是，这仍然是足够重要的考虑。 将来，这可能不是那么重要。
编辑：我用OP的方法做了一点testing。 在IE8中，我无法使用该技术，所以它绝对不是跨浏览器的。 而且，在Firefox和Chrome中，将list-style-type设置为none可能会被忽略。
我的解决scheme是在其中添加额外的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; }
使用dl (definition list) and dd来代替使用lu li。 <dd>可以使用标准的css风格（如{color:blue;font-size:1em;}并且可以使用标记作为标记。 它的工作方式与UL LI相似，但允许使用任何符号，只需将其缩进即可获得通常用ul li获取的缩进列表效果。
CSS: dd{text-indent:-10px;} HTML <dl> <dd>- One</dd> <dd>- Two</dd> <dd>- Three</dd></dl>
给你更清洁的代码！ 这样，你可以使用任何types的字符作为标记！ 缩进大约是-10px ，它的作品完美！
其他方式：
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; }
CSS：
li:before { content: '— '; margin-left: -20px; } li { margin-left: 20px; list-style: none; }
HTML：
<ul> <li>foo</li> <li>bar</li> </ul>
在我的情况下，将此代码添加到CSS
ul { list-style-type: '- '; }
就够了。 就这样简单。
