::before 到底是什么意思？

Question

33

我已经阅读了文档，大概理解了::before和::after的作用。如果我的理解是正确的，它们应该总是与其他元素结合使用。但我看到的网页却像这样：

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

我无法理解这里的::before和::after是做什么的?

- dotNET

它们可能是JavaScript模板系统的占位符，只是恰巧使用了类似CSS中的标记。您可以通过关闭JavaScript并重新加载页面进行确认。如果不知道该系统是什么，很难说出更具体的内容。 - JJJ

@Juhana：这是来自Bootstrap的示例模板。（http://getbootstrap.com/examples/dashboard/） - dotNET

我在那个链接里没有看到类似的东西。 - JJJ

1

我在 Chrome 中打开了这个链接，并在左列中的任何链接上右键单击，然后选择 检查元素 就会弹出此内容。 - dotNET

3

好的，检查员只是展示了前后 CSS 元素的位置。它们实际上并不在 HTML 源代码中（右键点击 -> 查看页面源代码）。 - JJJ

@Juhana：咕……你说得对。它们不在源代码中。让我感到自己很蠢。谢谢你的输入。 - dotNET

3个回答

15

我猜你能看到这个，因为chrome检查器可以用来检查这个：http://www.youtube.com/watch?v=AcKlJbmuxKo

它们实际上并不在服务器发送的原始HTML中，而是Chrome检查器仅添加的。

您可以使用它们来查看它们的屏幕箱模型和声明的样式。

- Farid Nouri Neshat

8

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

CSS：

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

- VeeeneX

2

为什么有负面评价？答案是正确的，但可能不够详尽。 - jsalonen

2

@jsalonen 我不知道，但我希望它能帮助到某人。 - VeeeneX

这个链接非常有帮助。 - undetected Selenium

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jsalonen · Accepted Answer

::before 和 ::after 是 CSS 伪元素，它们在匹配元素之前和之后创建。

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

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

h1:before {
  content: 'before';
}