有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
当前回答
另一种方法:
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;
}
其他回答
有一个简单的修复(文本缩进)来保持缩进列表效果，在伪类之前使用:。
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; /*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
另一种方法:
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;
}
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;
}
}
}
