css - 在元素上使用 :before 时，它​​会成为所述元素的第一个子元素吗？

Question

我一直在 CSS 中使用 :before 来表示将内容放在选择器之前。我从来没有遇到过任何问题，但是，我偶然发现了一些让我感到困惑的事情，选择器的 :before 是附加在元素内部而不是在它之前。我不明白为什么会这样。

这是一个小提琴：http: //jsfiddle.net/vMtct/1/

这是基本代码：

<div class="block">
  <p>But this &lt;p&gt; will have content <em>before</em>.</p>
</div>

.block {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 50px; }
.block:before {
  background: #eeeeee;
  content: "Here is something that print's inside the selector";
  display: block;
  padding: 20px;
  margin-bottom: 20px; }
p:before {
  display: block;
  content: ">>>"; }

Answer 1

:before并且:after是伪元素，实际上并未添加到 DOM 中。它们被插入到元素的内容之前。

因此，它们也不适用于像<input />or之类的“空”（自关闭）元素<img/>。

但是，您可以让这些伪元素显示在它们所应用的元素的“外部”，方法是将它们绝对定位，如下所示：http: //jsfiddle.net/vMtct/2/