迹忆客 专注技术分享

本文将介绍 CSS ::before 伪元素并探讨其在 HTML 中的应用。

CSS ::before 伪元素

::before 选择器是一个 CSS 伪元素，我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

content 属性通常带有 ::before 选择器。 该属性允许您在 ::before 选择器指定的位置添加内容。

使用这些属性，您可以在 HTML 文档中选择的位置添加内容，而无需对 HTML 代码进行任何更改。 您可以将 CSS 样式应用于选择器正文中添加的内容。

::before 选择器的语法如下所示：

selector::before{
    /*Css Properties*/
}

比如你要在一个段落前加一些内容，就应该这样写。

p::before{
    /*Css Properties*/
}

假设您已经用 HTML 编写了一段，但错过了标题。 在这种情况下，您可以使用 ::before 伪元素在段落之前添加标题。

您可以使用内容属性编写标题并添加样式。

在后面的部分中，您实际上将能够使用 ::before 伪元素。

使用 ::before 在 HTML 中的元素之前添加内容

让我们看一个如何使用 ::before 在元素之前添加内容的示例。

例如创建一个容器div1。 然后使用 <ol> 创建一个包含三个项目的有序列表。

使用 <li> 标签写一些你选择的随机项目。

示例代码：

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

输出几乎是可以预测的。 它是一个包含三个项目的有序列表。

您现在将在列表前添加一些项目而不更改 HTML 文档。

在 CSS 中，使用带有 div1 的 ::before 伪元素创建一个选择器作为 .div1::before。 在选择器的主体中，使用内容属性并为其值写入任意内容。

让我们将一行星号视为内容。

接下来，让我们在每个列表项前面添加一些内容。 您必须选择 li 元素并使用 ::before 伪元素。

选择元素作为 .div1 li::before 并使用内容属性添加“\2192”作为其值。 值 '\2192' 是右箭头的实体编号。

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

观察 div1 的内容之前，列表之前如何形成一行星号 *。 此外，在有序列表的每个点之前，我们插入了一个右箭头。

这就是 ::before 伪元素与 CSS 中的 content 属性的行为方式。