title: Why is :before pseudoelement rendered before content, not element?
body: <p>There is an example.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;head&gt;
  &lt;title&gt;An XHTML 1.0 Strict standard template&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
  &lt;style&gt;
      DIV#outer {
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: blue;
      }
      DIV#inner {
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: green;
      }
      DIV#inner:before {
          display: inline-block;
          content: '123';
          background-color: red;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>'#inner:before' pseudoelement is rendered inside '#inner'. To make it be rendered outside, I need to replace selector in last css block with 'DIV#outer:before', so it will be rendered inside '#outer', but before '#inner'. The question is why I'm observing such behaviour? <a href="http://www.w3schools.com/cssref/sel_before.asp" rel="nofollow">w3schools</a> says that "The :before selector inserts content before the selected element(s)". Before element, but not before content of element.</p>