有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
当前回答
在我的例子中，将这些代码添加到CSS中
ul {
list-style-type: '- ';
}
就足够了。很简单。
其他回答
另一种方法:
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.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: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
上面的一个答案不适合我，因为，经过一点点的尝试和错误，li:before也需要css规则display:inline-block。
所以这对我来说是一个完全可行的答案:
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
你可以像这样设置li::marker:
li::marker {
content: '- ';
}
