如何在HTML中创建带有短划线的列表

列表是以逻辑或线性格式显示的任何信息。它是以有意义的组或序列编写的项目集合，并以项目符号、数字等表示。HTML列表有助于语义显示信息列表。在HTML中，有三种类型的列表：

无序列表或带项目符号的列表（ul）

HTML无序列表中的列表项没有特定的顺序。因为项目用符号标记，所以无序列表也称为带项目符号的列表。它以<ul>标签开头，以</ul>标签结束。列表项由<li>标签分隔，并以</li>标签结束。

有序列表或带数字的列表（ol）

在HTML中，有序列表中的所有列表项默认情况下都带有数字而不是项目符号。HTML有序列表以

标签开头，以`

标签结束。列表项以

标签开头，以

`标签结束。

描述列表或定义列表（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属性 为元素替代生成一个值。使用content属性插入的对象将被匿名元素替换。通常与 :before 和:after伪元素一起使用。
如果我们想要使用破折号而不是符号来样式化无序列表，可以使用CSS的 :before 伪元素与content属性。

示例

以下示例通过将列表样式类型设置为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>