有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
当前回答
当使用键盘上不存在的符号时，请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号，请参阅HTML字符实体引用中的CSS代码列表。 对于键盘上的符号，直接使用键盘符号作为list-style-type属性的值。
参见下面的示例代码:
<！——查看HTML实体的符号不是在键盘上——> <h3>HTML实体:长向右双箭头</h3> <ul style="list-style-type: '\27F9';"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul > <！——直接使用键盘上的符号——> <h3>键盘上的破折号</h3> <ul style=" font - family:宋体;"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul >
其他回答
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示小提琴
你可以像这样设置li::marker:
li::marker {
content: '- ';
}
使用dl(定义列表)和dd代替lu li。 <dd>可以使用标准的CSS样式来定义，例如{color:blue;font-size:1em;}，并且可以使用放在HTML标记后的任何符号作为标记。它的工作方式类似于ul li，但允许您使用任何符号，您只需缩进它就可以获得通常使用ul li获得的缩进列表效果。
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
给你更干净的代码!这样，你可以使用任何类型的字符作为标记!缩进大约是-10px，它的工作完美!
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;
}`
你可以使用:before和content:，记住这在ie7或以下版本中是不支持的。如果你同意，那么这就是你最好的解决方案。详见Can I Use或QuirksMode CSS兼容性表。
在老版本的浏览器中，还有一种稍微糟糕一点的解决方案，那就是使用图像作为项目符号，并使图像看起来像一个破折号。有关示例，请参阅W3C列表样式的图像页面。
