有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
当前回答
有一个简单的修复(文本缩进)来保持缩进列表效果，在伪类之前使用:。
ul { 保证金:0; ｝ ul。{破灭 list-style-type:没有; ｝ ul。虚线> li { indent: 5 px; ｝ ul。虚线> li:before { 内容:“-”; indent: 5 px; ｝ 一些文本 < ul类=“冲”> <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > < ul > <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > 最后的文本
其他回答
在我的例子中，将这些代码添加到CSS中
ul {
list-style-type: '- ';
}
就足够了。很简单。
你可以像这样设置li::marker:
li::marker {
content: '- ';
}
对我有用的是
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
以下是我的小提琴版本:
<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;
}
有一个简单的修复(文本缩进)来保持缩进列表效果，在伪类之前使用:。
ul { 保证金:0; ｝ ul。{破灭 list-style-type:没有; ｝ ul。虚线> li { indent: 5 px; ｝ ul。虚线> li:before { 内容:“-”; indent: 5 px; ｝ 一些文本 < ul类=“冲”> <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > < ul > <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > 最后的文本
