使用时：在元素之前，它成为所述元素的第一个子元素？

Question

我一直使用：在CSS之前意味着在选择器之前放置内容。我从来没有遇到过这方面的任何问题，但是，我偶然发现了一些让我感到困惑的事情：选择器：在将添加到元素之前而不是之前它。我不明白为什么会这样。

这是一个小提琴：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/