Question

所以我阅读了文档，可能了解::before和::after的目的。如果我的理解是正确的，它们应该始终与其他元素结合使用。但我正在看的网页有这样的东西：

<body>
    <div class="container-fluid">
        ::before
        <div> ... </div>
        ::after
    </div>
<body>

我无法理解::before和::after在这里做了什么？

Answer 1

::before和::after是指在匹配元素之前和之后创建的CSS pseudo-elements。

伪元素通常不会显示在HTML元素树中。但是，如果您使用的是正确类型的调试工具（如Chrome检查器），则可以看到这些特殊元素。由于现在使用伪选择器设置页面样式非常常见，因此使用可以显示它们的调试工具非常有用。

要从Chrome检查器（或其他功能强大的工具）验证此行为，请尝试使用CSS向其中一些伪元素添加一些内容，例如：

h1:before {
  content: 'before';
}

Answer 2

我假设您正在看到这一点，因为Chrome检查员会将其显示出来进行检查：http://www.youtube.com/watch?v=AcKlJbmuxKo

它们实际上不在服务器提供的原始html中，但仅由Chrome Inspector添加。

您可以使用它们在屏幕上查看其盒子模型以及为它们声明的样式。

Answer 3

::before和::after是伪元素，您可以在此示例中看到：

<强> CSS：

.container-fluid>p::before{
    content: "HI";
}
.container-fluid>p::after{
    content: "Bee";
}