Html 你以前真正做什么？_Html_Css_Google Chrome_Css Selectors

Html 你以前真正做什么？

html css google-chrome

Html 你以前真正做什么？,html,css,google-chrome,css-selectors,Html,Css,Google Chrome,Css Selectors,因此，我阅读了文档，可能理解了：：before和：：after的目的。如果我的理解是正确的，它们应该始终与其他元素结合使用。但我看到的网页有如下内容： <body> <div class="container-fluid"> ::before <div> ... </div> ::after </div> <body> ：：之前 ... ：：之后我无法

因此，我阅读了文档，可能理解了

：：before

和

：：after

的目的。如果我的理解是正确的，它们应该始终与其他元素结合使用。但我看到的网页有如下内容：

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


：：之前
... 
：：之后

我无法理解

：：before

和

：：after

在这里做什么？

：：before

和

：：after

是伪元素，正如您在本例中看到的：

CSS:

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

您可以在此处阅读更多内容：

：：before

和

：：after

指在匹配元素之前和之后创建的

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

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

h1:before {
  content: 'before';
}

我假设您看到了，因为chrome inspector会将其显示出来进行检查：

它们实际上不是从服务器提供的原始html，而是由Chrome Inspector添加的

您可以使用它们在屏幕上查看它们的长方体模型以及为它们声明的样式

同时检查一下：

它们可能是JavaScript模板系统的占位符，而JavaScript模板系统恰好使用了类似于CSS中的标记。您可以通过关闭JavaScript并重新加载页面来确认。在不知道系统是什么的情况下，很难说得更具体。@Juhana：这是来自Bootstrap的示例模板。（）我在那个链接上看不到任何类似的东西。我在Chrome中打开了这个链接，右键单击左列中的任何链接，然后选择Inspect元素，就会出现这个问题。对，inspector只是显示CSS元素前后的位置。它们实际上不在HTML源代码中（右键单击->查看页面源代码）。如果Chrome在inspector中显示这些伪元素，那么可能已经向它们添加了一些内容。确实如此。但是

：：before

和

：：after

不会显示在实际页面中。此外，我指的是HTML元素结构，而不是页面的实际视图，但我可以看出我对此还不够了解！为什么是否定的？答案是正确的，但可能并不详尽。@jsalonen我不知道，但我希望它能帮助别人。链接真的很有帮助。