数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML中创建带短划线的列表？
列表是指以逻辑或线性格式显示的任何信息。它是由项目组成的集合，以有意义的组或序列编写，并用项目符号、数字等表示。HTML列表有助于语义化地显示信息列表。在HTML中，有三种类型的列表
无序列表或项目符号列表 (ul)
HTML无序列表中的列表项没有特定的顺序或序列。因为项目用项目符号标记，所以无序列表也称为项目符号列表。它以<ul>标签开头，以</ul>标签结束。列表项由<li>标签分隔，并以</li>标签结束。
有序列表或编号列表 (ol)
在HTML中，有序列表中的所有列表项默认情况下都用数字而不是项目符号标记。HTML中的有序列表以<ol>标签开头，以</ol>标签结束。列表项以<li>标签开头，以</li>标签结束。
描述列表或定义列表 (dl)
HTML描述列表或定义列表中的列表项像字典或百科全书一样组织。描述列表中的每个项目都有一个描述。描述列表可用于显示诸如词汇表之类的项目。要创建描述列表，您需要以下HTML标签
<dl> (定义列表)标签
<dt> (定义术语)标签
<dd> 标签 (定义描述)
</dl> 标签 (定义列表)
列表样式类型
list-style-type指定将在列表中使用的列表项标记的类型。标记的颜色将与应用于它的元素的计算颜色相同。只有少数元素（<li>和<summary>）的默认值为display: list-item。
另一方面，list-style-type属性可以应用于任何其显示值设置为list-item的元素。此外，由于此属性是继承的，因此可以将其设置在父元素（通常为<ol>或<ul>）上以应用于所有列表项。以下是语法：
list-style-type: value;
list-style-type属性有很多值，其中一些包括disc、circle、decimal、square、Hebrew、lower alpha、upper alpha等。
为了使用自定义值（如短划线），我们可以使用CSS属性。在本教程中，我们将使用某些CSS伪元素和属性创建带有短划线的无序列表。
使用CSS的“:before”伪元素
CSS **伪元素**是添加到选择器中的关键字，允许您设置所选元素的特定部分的样式。以下是语法：
selector::pseudo-element {
property: value;
}
在CSS中，**::before**创建一个伪元素，它是所选元素的第一个子元素。它经常与content属性一起使用，为元素添加装饰性内容。默认情况下，它是内联的。
CSS **content属性**用生成的value替换元素的value。用content属性插入的对象将被替换为匿名元素。它通常与**:before**和:after伪元素一起使用。
如果我们想要一个用短划线而不是项目符号样式化的无序列表，我们可以使用带有content属性的CSS **:before**伪元素。
示例
下面的示例通过将list-style-type设置为none，并使用:before伪元素以及content属性来创建带有短划线的列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
list-style-type: none;
color:darkslateblue;
}
ul li:before {
content: '\2013';
position: absolute;
margin-left: -15px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul>
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
在上面的示例中，2013用作短划线的十六进制代码点。
示例
此特定示例通过使用**‘text-indent’**属性创建具有缩进列表效果和短划线的无序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
margin: 10px;
}
ul.dash {
list-style-type: none;
}
ul.dash > li {
text-indent: -20px;
}
ul.dash > li:before {
content: "-";
text-indent: -20px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul class="dash">
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
5K+ 浏览量
