Why is :before pseudoelement rendered before content, not element?

Question

There is an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
    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;
    }

</style>

</head>

<body>
<div id="outer">
    <div id="inner">

    </div>
</div>
</body>
</html>

'#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? w3schools says that "The :before selector inserts content before the selected element(s)". Before element, but not before content of element.

score 5 · Accepted Answer · answered Aug 24 '11 at 13:35

5

w3schools is notoriously inaccurate and not affiliated with the W3C.

From the CSS 2.1 spec (emphasis added):

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

answered Aug 24 '11 at 13:35

phihag

278,196
72
453
469

Thank you! Google places w3schools on top. Next time will read spec. – mixel Aug 24 '11 at 13:55
2

@mixel: The spec is a pretty dry read. The MDN docs are pretty good, and always up to date: https://developer.mozilla.org/en/CSS_Reference – Matthew Scharley Aug 27 '11 at 23:11

score 1 · Answer 2 · answered Aug 24 '11 at 13:35

W3Schools is wrong often. In this case it is wrong. :before and it's counterpart :after are supposed to be inside the element in question, but before and after anything inside it.

The MDN phrases it this way:

:before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.

Why is :before pseudoelement rendered before content, not element?

2 Answers2

Linked