有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事,尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说,我不介意知道如何为列表项使用通用字符。
有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事,尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说,我不介意知道如何为列表项使用通用字符。
当前回答
对于今天遇到这个问题的人来说,解决方法很简单:
列表样式:"- "
其他回答
下面是一个没有任何相对或绝对位置,也没有文本缩进的版本:
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
喜欢。)
我的解决方案是在添加额外的span标签与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;
}
CSS:
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
有一个简单的修复(文本缩进)来保持缩进列表效果,在伪类之前使用:。
ul { 保证金:0; } ul。{破灭 list-style-type:没有; } ul。虚线> li { indent: 5 px; } ul。虚线> li:before { 内容:“-”; indent: 5 px; } 一些文本 < ul类=“冲”> <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > < ul > <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > 最后的文本
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示小提琴