如果你想要一个无序列表的样式为破折号而不是项目符号，你可以使用 CSS :before 伪元素和 content 属性。
创建带破折号的无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
list-style-type: none;
color:#999999;
}
ul li:before {
content: '14';
position: absolute;
margin-left: -20px;
}
</style>
</head>
<body>
<ul>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
</ul>
</body>
</html>
在上面的例子中，我们将 <ul> 元素的 list-style-type 属性设置为“none”。
此外，我们为 <li> 元素添加了 position 和 margin-left 属性。
请注意，当项目跨越多行时，下一行的缩进从破折号开始。
如果你想修复它，试试下面的例子，我们保留了缩进列表效果。
创建具有带破折号的缩进列表效果的无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -20px;
}
ul.dashed > li:before {
content: "-";
text-indent: -20px;
}
</style>
</head>
<body>
<h2> List with dashes</h2>
<ul class="dashed">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
<h2> List with bullets</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</body>
</html>
其中我们使用 text-indent 属性来实现缩进列表效果。
日期：2020-06-02 22:15:06 来源：oir作者：oir