我在 HTML 元素检查器中看到的 ::before 和 ::after 是什么？

Question

我们的网站在一些地方使用了这样的标记：

<header class="row">
  ::before
  <h1 class="entry-title">Privacy Policy</h1>
  ::after
</header>

::before 和 ::after 是什么意思，我该如何使用它们？

Answer 1

您不应在标记中看到这些。

您可能会在各种浏览器开发人员工具的元素检查器中看到它们。

它们代表 the before and after pseudo-elements，您可以用 CSS 生成。

Answer 2

::before 元素在给定元素之前插入一个 html 元素，就像 ::after 元素在给定元素之后插入一个 html 元素一样。（如所述here, try-it-yourself）

例如：

index.html

<html>
    <head>
         <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <p>World</p>
    </body>
</html>

style.css

p::before {
    content: "Hello ";
}

p::after {
    content: "!";
}

这将在您的 HTML 页面上显示 Hello World!。

What's the ::before and ::after that I see in the HTML element inspector?