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

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/