::before 到底是做什么的？答案

【问题标题】：what does ::before really do?::before 到底是做什么的？
【发布时间】：2014-07-06 08:43:03
【问题描述】：

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

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

我不明白::before 和::after 在这里做什么？

【问题讨论】：

它们可能是 JavaScript 模板系统的占位符，该系统恰好使用类似于 CSS 中的标记。您可以通过关闭 JavaScript 并重新加载页面来确认。在不知道系统是什么的情况下，很难说更具体的内容。
@Juhana：这是来自 Bootstrap 的示例模板。 (getbootstrap.com/examples/dashboard)
我在那个链接上没有看到类似的东西。
好吧，我在 Chrome 中打开了这个确切的链接，然后右键单击左栏中的任何链接并选择 Inspect Element 会出现此问题。
对，检查器只是显示 CSS 元素之前和之后的放置位置。它们实际上不在 HTML 源代码中（右键单击 -> 查看页面源代码）。

【解决方案1】：

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

CSS：

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

【讨论】：

【解决方案2】：

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

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

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

h1:before {
  content: 'before';
}

【讨论】：

【解决方案3】：

我假设你看到了，因为 chrome 检查器显示它以供检查：http://www.youtube.com/watch?v=AcKlJbmuxKo

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

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

【讨论】：