CSS 伪元素的工作原理，对初学者来说非常简单的解释

2025-06-10

CSS 伪元素的工作原理，对初学者来说非常简单的解释

伪元素尤其::before如此，::after现在非常流行。像Cyber​​punk.net这样的优秀网站就利用它们创造出令人惊叹的效果。然而，很多新手并没有完全掌握它们的威力。所以，在掌握它们的威力之前，你首先需要了解它们的工作原理。

刚开始使用伪元素的时候，我完全不知道自己在做什么，也不知道它们到底是怎么工作的。我只是复制粘贴别人的代码，并没有真正理解它们为什么能用或不能用。

如果你想驾驭 CSS 的强大功能并精通其道，那么理解伪元素至关重要。读完这篇文章，你将深刻理解什么是伪元素，以及如何使用它们来创建自己的时尚元素。

但首先，让我们探究一下它们是什么。

什么是伪元素

在 CSS 中，伪元素是添加到选择器中的关键字。这些伪元素允许您为所选元素的特定部分设置样式。CSS 使用两个冒号表示它们，::这有助于将它们与只有一个冒号的 CSS 伪类区分开来:。

在了解具体的伪元素之前，让我们先看看 CSS 伪元素的一般语法。

句法

selector::pseudo-element {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

如你所见，你将 CSS 选择器放在双冒号之前。接下来，在花括号内，编写 CSS 属性值对，就像你为其他元素添加样式一样。

作为一个真实的例子，我们可以做如下的事情。

.second::selection {
  color: #fff;
  background-color: mediumspringgreen;
}
Enter fullscreen mode Exit fullscreen mode

本示例::selection在 CSS 类选择器中使用了伪元素second。现在，当您突出显示段落文本时，它会显示不同的颜色和背景。

::selection我们稍后会进一步探讨伪元素。现在我希望你集中讨论两个主要的伪元素::before和::after。

什么是 before 和 after 伪元素？

使用 before 和 after 伪元素，您可以将内容插入到网页中。它们允许您在无需 HTML 代码的情况下执行此操作。本质上，您可以通过 CSS 插入内容。

关于before和after伪元素，需要注意的一点是，它们在创建时实际上并不在DOM上。换句话说，它们是假元素，这就是为什么它们被称为“伪元素”，因为“pseudo”这个词的意思就是假的。这个名字很贴切，因为这些元素实际上不会改变文档中的任何内容。它们是隐藏元素，仅对用户可见，而对DOM不可见。

实际情况是这样的。

h1::before {
  content: ‘before’;
}

h1::after {
  content: ‘after’;
}
Enter fullscreen mode Exit fullscreen mode

结果将会是这样的。

<h1>
  before
    <!--actual h1 element -->
  after
<h1>
Enter fullscreen mode Exit fullscreen mode

知道这些元素是假的之后，现在是时候看看在 Web 开发中经常使用的第一个假元素，即之前的伪元素。

before 伪元素

在 CSS 中，::before创建一个伪元素，作为被选元素的第一个子元素。换句话说，它是一个位于 CSS 选择器内容之前的伪元素。因此，如果你有一个段落元素，它看起来就像这样：p::before既是p选择器，又::before是伪元素。

考虑到这一点，让我们看一些例子。

<p>Mr. and Mrs. Dursley of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much.</p>
Enter fullscreen mode Exit fullscreen mode 
p {
  font-size: 14px;
  color: #7f0909;
  background-color: #ffc500;
}

p::before {
  content: "the boy who lived";
  text-transform: uppercase;
  font-size: 130%;
  background-color: #5BC8F8;
  border: solid black 1px;
}
Enter fullscreen mode Exit fullscreen mode

结果

::before 伪元素结果

从上面的代码中，我们在 CSS 选择器之前添加了内容“the boy who lived”p ，在本例中是标签及其内容。

然后，我们就可以按照自己的需要对选择器之前的内容进行样式设置。

如果我们检查codepen中的开发者工具，你会发现根本没有“活着的男孩”这个元素，只有一个伪元素::before。因为它实际上并不在 DOM 上。

伪元素在开发工具中显示，但不在 dom 上

我们来看另一个例子。

<h1>harry potter and the sorcerer's stone</h1>
Enter fullscreen mode Exit fullscreen mode 
h1 {
  display: inline-block;
  text-transform: uppercase;
}

h1::before {
  content: "";
  display: block;
  background: #ffc500;
  height: 5px;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

结果

具有块状样式的伪元素之前

在此示例中，before 伪元素使用了display值为 的属性block。这将使背景以 5px 的宽度移动到h1元素的上方和前方。

现在您知道了 before 伪元素的作用，让我们看看 after 伪元素。

After 伪元素

在 CSS 中，::after创建一个伪元素，它是所选元素的最后一个子元素。与 非常相似::before，它是一个位于 CSS 选择器内容之后的伪元素。

记住这一点，让我们使用之前部分的第二个示例，并在下面添加一行带有之后伪元素的行。

h1::after {
  content: "";
  display: block;
  background: #ffc500;
  height: 5px;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

结果

带有块样式的伪元素之前和之后

现在，我们在 下方有一条线h1。这太酷了，我们可以制作自己的小样式元素来创建美观的元素。

::before到目前为止，你应该已经很好地理解了和::after伪元素的工作原理。为了进一步加深我们的理解，我们需要了解content属性是什么以及它的作用。

内容属性

content你注意到了属性与::before和伪元素的结合使用了吗::after？使用 属性插入的对象content是 匿名替换元素。简单来说，它是一个内容不受当前文档样式影响的元素。

因此，在使用::before和::after伪元素时，必须使用content属性来使样式可见。您是否还注意到内容位于元素内部？尽管::before和 的命名::after看起来内容应该位于元素之前或之后。但实际上，它确实位于元素内部内容之前或之后。

接下来，为了更好地理解内容属性，让我们看看它采用什么值。

内容属性接受的值

content 属性有多种类型的值。默认值为normal。这意味着“通常”情况下，用户看不到任何内容。因此，你可以为 content 属性指定以下值之一。

其他值内容可以是：

  • 字符串- 将内容设置为您指定的字符串。
  • 计数器- 用于设置列表样式。
  • 图像- 这会将内容设置为您使用或数据类型指定的图像。图像将以其精确尺寸插入，这意味着您无法调整图像大小。 url()gradient
    • 请注意，要插入替代文本，请/在“ ”后面加上“ url()”和图像的字符串描述。例如：content: url("https://www.example.com/test.png") / "This is the alt text";
  • 没什么——适用于插入图像作为背景图像（设置宽度和高度，甚至可以通过背景大小调整大小），或制作其他很酷的样式功能（链接到 dev.to 帖子）。
  • attr ()值 - 将内容设置为所选元素属性的字符串值。

其他很棒的伪元素

选择

::selection- 这是一个 CSS 伪元素，用于将样式应用于文档中用户已高亮显示的部分。换句话说，当用户高亮显示需要复制的文本时，它可以让页面上的荧光笔看起来更美观。

p::selection {
  background-color: cyan;
}
Enter fullscreen mode Exit fullscreen mode

首字母

::first-letter- CSS 伪元素将样式应用于块级元素第一行的第一个字母，但前提是前面没有其他内容（例如图像或内联表格）。

换句话说，这个伪元素可以让你为所选元素的第一行首字母设置样式。此功能仅适用于被归类为块级元素的元素，请查看链接以获取块级元素列表。

因此，我们可以使用这个伪元素为我们的段落制作出色的首字下沉，请参见下面的示例。

p {
  width: 600px;
  line-height: 1.5;
  font-weight: 500;
}

p::first-letter {
  color: white;
  background-color: rgb(55, 97, 117);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(212, 173, 81);
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}
Enter fullscreen mode Exit fullscreen mode

一线

::first-line- CSS 伪元素将样式应用于块级元素的第一行。

简单来说，上面的意思是，这个伪元素可以让你设置所选元素首行的样式。和首字母一样，这只适用于块级元素。

我们将下面的代码添加到first-letter示例中。

p::first-line {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

结果

首字母和首行伪元素对 p 元素的影响

如您所见，p现在第一行的文本已首字下沉且为红色。尝试调整上方笔刷的宽度，看看增加或减少宽度时会发生什么。

你有没有注意到，如果文本移动几行，颜色会发生变化？在设计第一行样式时，你必须仔细考虑元素的宽度以及它在不同屏幕上的响应方式等因素。

标记

CSS::marker伪元素选择列表项的标记框，通常包含项目符号或数字。

marker 伪元素允许您替换计数器的内容值。有关计数器工作原理的示例，我建议您查看这篇文章。也就是说，计数器只是列表项前面的数字项目符号（<li>），而::marker伪元素允许您为其设置样式。

让我们看一个例子。

<h3>Nintendo Hero's</h3>
<ul>
  <li>Mario</li>
  <li>Link</li>
  <li>Samus</li>
</ul>
Enter fullscreen mode Exit fullscreen mode 
ul li::marker {
  color: #e4000f;
}
Enter fullscreen mode Exit fullscreen mode

上面的例子很简单，我们只是把项目符号的颜色改成了红色。不过，你还可以做很多事情，比如更改样式，甚至使用表情符号。

最后，需要注意的是，在撰写本文时，::marker 伪元素尚未得到完全支持。

浏览器对标记伪元素的支持

概括

现在你应该对伪元素有了很好的理解。让我们回顾一下一些重要的注意事项。

首先，伪元素可以让你为所选元素的特定部分添加样式。伪元素用双冒号表示。

接下来，请记住伪元素不会出现在DOM中，因为它们是假元素。让它们对用户可见的方法是利用content属性。

最后，如果您从这篇文章中学到了一些东西，那么请查看我在这里的其他文章或订阅我的时事通讯，以获取极其精彩和超级独家的新手内容。

鏂囩珷鏉ユ簮锛�https://dev.to/peterlunch/how-css-pseudo-elements-work-a-ridiculously-simple-explanation-for-beginners-49gk
Devto 翻译
PREV
将 JPEG UIImage 的 RAM 使用量减少 50%
NEXT
使用 Git 别名更快地工作 Git Aliases