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

Question

我們的網站在一些地方使用這樣的標記：

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

::before和::after表示什么，我該如何使用它們？

Answer 1

您不應在標記中看到這些內容。

您可能會在各種瀏覽器開發人員工具的元素檢查器中看到它們。

它們表示可以使用CSS生成的偽元素之前和之后。

Answer 2

::before元素在給定元素::before插入html元素，就像::after元素在給定元素::after插入html元素一樣。 （如描述這里，試着自己動手）

例如：

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: "!";
}

這將導致Hello World! 在您的HTML頁面上。