什么::之前真的吗？

Question

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

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

我无法理解什么::before和::after正在做的事情？

Answer 1

::before并::after引用在匹配元素之前和之后创建的CSS伪元素.

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

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

h1:before {
  content: 'before';
}

Answer 2

我假设您正在看到这一点,因为镀铬检查员会将其显示出来进行检查: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";
}