:: before真正做什么？

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 inspector显示了它以供检查：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";
}