css - 使用 :before on an element it becomes the first child of said element? 时

Question

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

这是一个 fiddle :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 /> 这样的“空”(自闭合)元素。或 <img/> .

然而，您可以让这些伪元素显示在它们所应用的元素“外部”，通过将它们定位为绝对位置，如下所示:http://jsfiddle.net/vMtct/2/