提问人：Brian M. Hunt 提问时间：7/8/2010 最后编辑：Yi JiangBrian M. Hunt 更新时间：3/6/2023 访问量：445367
HTML 列表样式类型的破折号
HTML list-style-type dash
问：
有没有办法在 HTML 中创建带有破折号（即 - 或 - 或 — ）的列表样式，即–—
<ul>
<li>abc</li>
</ul>
输出：
- abc
我想到用类似的东西来做到这一点，尽管我不知道该选项的缺点（并且非常有义务提供反馈）。li:before { content: "-" };
更一般地说，我不介意知道如何为列表项使用通用字符。
答：
116赞
Darko
7/8/2010
#1
您可以使用并记住，IE 7 或更低版本不支持此功能。如果您对此感到满意，那么这是您最好的解决方案。有关完整的详细信息，请参阅Can I Use 或 QuirksMode CSS 兼容性表。:beforecontent:
在较旧的浏览器中应该起作用的一个稍微讨厌的解决方案是使用图像作为项目符号，并使图像看起来像破折号。有关示例，请参阅 W3C list-style-image 页面。
评论
33赞
chiborg
11/7/2011
问题在于，当列表项跨越几行时，第 2 行上的缩进从破折号所在的位置开始，从而破坏了缩进列表效果。您需要使用悬挂缩进来避免这种情况。请参阅：alistapart.com/articles/taminglists:before
4赞
Ivan Z
2/19/2016
使用 mdashcontentcontent: "\2014\a0"
0赞
Verbe
4/19/2020
看@three的答案，比较通用，不那么冗长！
0赞
ranaalisaeed
12/18/2020
此答案中没有显示代码示例，想知道为什么将其标记为解决方案。恕我直言，@three的答案要好得多，应该被接受为答案。
3赞
TNi
7/8/2010
#2
我不知道是否有更好的方法，但您可以创建一个描绘破折号的自定义项目符号图形，然后让浏览器知道您想在列表中使用 list-style-type 属性使用它。该页面上的示例显示了如何使用图形作为项目符号。
我从未尝试过以您的方式使用：before，尽管它可能有效。缺点是一些较旧的浏览器不支持它。我的直觉反应是，这仍然足够重要，需要考虑。在未来，这可能就不那么重要了。
编辑：我已经对OP的方法进行了一些测试。在 IE8 中，我无法让该技术工作，所以它肯定还不是跨浏览器的。此外，在 Firefox 和 Chrome 中，将 list-style-type 设置为 none 似乎被忽略了。
256赞
aron.lakatos
3/21/2012
#3
有一个简单的修复（文本缩进）来保持伪类的缩进列表效果。: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评论
14赞
toesslab
2/9/2015
有效，但不要忘记将 放到元素中。list-style-type: none;<ul>
7赞
Qlimax
5/19/2015
没有缩进，只是ul li:before{ content:"- ";}
5赞
Simon East
12/11/2015
我更喜欢添加可以更容易地将其从内容流中拉出，否则很难/有问题地让第一行和后续行正确排列。或者张克彦的回答也是用绝对定位来做到这一点的。display: block; float: left;li:before
0赞
pluton
2/19/2020
类似于您提出的纯 HTML 解决方案是什么？
6赞
biziclop
1/9/2013
#4
这是我的小提琴版本：
（modernizr）类实际上意味着IE8+和所有其他理智的浏览器。.generatedcontent<html>
<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;
}
3赞
Victor Stagurov
1/11/2013
#5
我的解决方案是添加带有 mdash 的额外跨度标签：
<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;
}
2赞
Carolyne Comtois
4/23/2013
#6
而不是使用陆离，而是使用. 可以使用标准 CSS 样式进行定义，例如将您在 HTML 标记后放置的任何符号用作标记。它的工作方式类似于 ul li，但允许您使用任何符号，您只需缩进它即可获得通常获得的缩进列表效果。dl (definition list) and dd<dd>{color:blue;font-size:1em;}ul li
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
为您提供更干净的代码！这样，您可以使用任何类型的字符作为标记！缩进大约是，它工作得很好！-10px
评论
9赞
mzgajner
1/14/2014
由于两个原因，这是非常糟糕的。首先，您将项目符号直接放在文本中，混合内容和风格。其次，你误用了 dl 元素，这里有一篇关于正确使用的文章。
64赞
Jase
4/24/2013
#7
使用这个：
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
评论
3赞
Hereblur
7/9/2013
不幸的是，它不尊重 css 文本的颜色。
7赞
Oleg
4/10/2014
电子邮件唯一可能的解决方案
0赞
user2875289
11/28/2018
它现在不适用于Gmail（2018年11月）和Outlook 2016。
0赞
Aristides
7/12/2021
很棒的简单解决方案，有什么简单的方法可以使破折号更长吗？
90赞
velop
5/12/2013
#8
下面是一个没有任何位置、相对或绝对位置且没有文本缩进的版本：
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
享受;)
评论
1赞
w.stoettinger
9/15/2015
伟大！我建议“ul.dash > li：before”。否则内部 ULS 会搞砸。
1赞
Simon East
12/11/2015
我更喜欢添加可以更容易地将其从内容流中拉出，否则很难/有问题地让第一行和后续行正确排列。或者张克彦的回答也是用绝对定位来做到这一点的。display: block; float: left;li:before
0赞
sshow
10/2/2017
我用它作为导航类，带有 和.activeli:before { visibility: hidden; }li.active:before { visibility: visible; }
0赞
Verbe
4/19/2020
最好的建议imo！
4赞
iimos
2/14/2014
#9
另一种方式：
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;
}
38赞
Keyan Zhang
6/18/2014
#10
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示小提琴
3赞
blackchestnut
6/27/2015
#11
CSS：
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML格式：
<ul>
<li>foo</li>
<li>bar</li>
</ul>
评论
1赞
jenlampton
3/17/2018
这不适用于跨越多行的项目
69赞
Albert Sosnowski
1/11/2017
#12
在我的情况下，将此代码添加到CSS
ul {
list-style-type: '- ';
}
就够了。就这么简单。
评论
2赞
dontexist
11/23/2017
假设这是 CSS 的一个相对较新的添加，因为我找不到另一个提到它的答案，但这确实应该是这些天公认的答案。
1赞
Alex
3/25/2020
Chrome 现在也支持此功能（我相信截至 79 年）：chromestatus.com/feature/5893875400966144 和 caniuse.com/#feat=mdn-css_properties_list-style-type_string
1赞
Kevin
6/5/2022
把这个答案拿到顶端！
0赞
Vladan
7/6/2022
我刚刚注意到“En dash”后面的空间，这是一个很好而简单的解决方案，可以解决破折号在视觉上太接近内容开头的问题。
33赞
three
1/26/2017
#13
让我也添加我的版本，主要是为了让我再次找到自己喜欢的解决方案：
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
评论
0赞
Axel
7/24/2018
恕我直言，这是迄今为止最好的解决方案。谢谢分享！
7赞
user3849374
3/15/2017
#14
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
评论
0赞
Sasha Bond
4/7/2017
可能是 ''' ul { margin：0; list-style-type： none; } ul li：before { content： “- ”;}''' 否则它也会影响 ol 列表
4赞
Bee Bat
12/8/2017
#15
对于今天遇到此问题的任何人，解决方案很简单：
列表样式：“-”
1赞
C oneil
3/23/2018
#16
对我有用的是
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
评论
0赞
Badmus Taofeeq
9/13/2021
好想兄弟。
11赞
Joery
6/3/2019
#17
其中一个最重要的答案对我不起作用，因为经过一番反复试验，li：before 还需要 css 规则 display：inline-block。
所以这对我来说是一个完全有效的答案：
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
评论
0赞
Arslan Ameer
2/24/2020
这是用 LESS/SASS 编写的。
4赞
Ritu Gupta
12/11/2020
#18
[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;
}`
3赞
trashtatur
2/11/2021
#19
您可以像这样设置 li：：marker：
li::marker {
content: '- ';
}
评论
0赞
berkyl
12/15/2021
不适用于 Safari developer.mozilla.org/de/docs/Web/CSS/::marker
21赞
Brady Huang
3/7/2021
#20
ul {
list-style-type: '-';
}
你可以参考 MDN
3赞
myverdict
2/7/2022
#21
- 使用键盘上不存在的符号时，请参阅 HTML 实体并使用属性的 CSS 代码值。有关不同的符号，请参阅 HTML 字符实体引用中的 CSS 代码列表。
list-style-type - 对于键盘上的符号，请直接将键盘符号用作属性的值。
list-style-type
请参阅下面的示例代码：
<!-- See HTML entities for symbols NOT on the keyboard -->
<h3>HTML Entities: Long Rightwards Double Arrow</h3>
<ul style="list-style-type: '\27F9';">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<!-- Use symbols on the keyboard directly -->
<h3>Dash symbol on the keyboard</h3>
<ul style="list-style-type: '-';">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
4赞
mahan
3/6/2023
#22
使用，截至 2023 年 3 月，它拥有 93% 的全球支持。list-style-type
list-style-type CSS 属性设置列表项元素的标记（如光盘、字符或自定义计数器样式）。
ul {
list-style-type: "- "
}
记得在 - 之后添加一个空格
评论
ul { list-style-type: '- '; }现在似乎两者都有效。–– 是的，提议应该在 CSS 标准中实现。– 也许在 2032 年。;)ul { list-style: '- '; }list-style-type: dash;