如何在 HTML 中创建带破折号的列表?

htmlweb developmentfront end technology更新于 2025/3/26 17:48:17

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

无序列表或项目符号列表 (ul)

HTML 无序列表中的列表项没有任何特定的顺序或序列。由于项目以项目符号标记，无序列表也称为项目符号列表。它以 <ul> 标签开头，以 </ul> 标签结尾。列表项由 <li> 标签分隔，并以 </li> 结尾。标签。
有序列表或编号列表

在 HTML 中，默认情况下，有序列表中的所有列表项都用数字而不是项目符号标记。HTML 中的有序列表以 <ol> 标签开头，以 </ol> 标签结尾。列表项以 <li> 标签开头，以 </li> 标签结尾。
描述列表或定义列表 (dl)

HTML 描述列表或定义列表中的列表项的组织方式类似于字典或百科全书。描述列表中的每个项目都有相应的描述。描述列表可用于显示词汇表等项目。要创建描述列表，您需要以下 HTML 标签:
- <dl>(定义列表)标签
- <dt>(定义术语)标签
- <dd> 标签(定义描述)
- </dl> 标签(定义列表)

样式类型列表

list-style-type 指定将在列表中使用的列表项标记的类型。标记的颜色将与其应用到的元素的计算颜色相同。只有少数元素(<li> 和 <summary>)的默认值为 display: list-item。

另一方面，list-style-type 属性可以应用于任何 display 值为 list-item 的元素。此外，由于此属性是继承的，因此可以将其设置在父元素(通常是 <ol> 或 <ul>)上，以应用于所有列表项。语法如下 –

list-style-type: value;

列表样式 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 属性。

请

下面的示例通过将 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>