How does :before work in css?

Question 1

:before creates a virtual content using CSS, so in the above case, author uses below snippet means

.parent:before{
   z-index:-1;
   content:'';
   position:absolute;
   opacity:0.5;
   width:400px;
   height:200px;
   background-image:url('wallpaper324845.jpg');
   border:1px solid red;
}

He is creating a virtual element using :before, which he then positions absolute, assigns some dimensions, and assigns the background, to make sure that it stays below the div content, he uses z-index: -1;

In other words, :before, :after are nothing but assume nesting two span elements inside your div, but by using pseudo elements, you don't need to have span as you can achieve the same thing with the pseudo elements.

Consider you have something like this

<div>
    Hello
    <span></span>
</div>

div {
   position: relative; 
}

div span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

Demo

Can be also achieved using :before or :after, markup stays the same but CSS goes like

div {
   position: relative; 
}

div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

Demo

So, it just saves you one empty element in your HTML, but if you look at the above CSS, am using content property which is ALWAYS associated with :before or :after, and yes, it is required, even if you keep it blank.

Also, note that :before and :after generated content are inline, so inorder to make height, width work, you need to explicitly mention display: block; or display: inline-block; if you want to make it block level, but in this particular case, you won't need that as the pseudo element is positioned absolute

div:after {
    content: "Hello";
    margin-top: 20px; /* This wont work as pseudo is inline by default */
}

Demo

So make it block or inline-block

Demo

Question 2

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. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

Below is a document tree with HTML as root.

HTML
.HEAD    
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI

For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":

p.note:before { content: "Note: " }

The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:

p.note:before { content: "Note: " }
p.note        { border: solid green }

would cause a solid green border to be rendered around the entire paragraph, including the initial string.

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

For example, the following rules insert an open quote mark before every Q element. The color of the quote mark will be red, but the font will be the same as the font of the rest of the Q element:

q:before {
  content: open-quote;
  color: red
}

In a :before or :after pseudo-element declaration, non-inherited properties take their initial values.

So, for example, because the initial value of the 'display' property is 'inline', the quote in the previous example is inserted as an inline box (i.e., on the same line as the element's initial text content). The next example explicitly sets the 'display' property to 'block', so that the inserted text becomes a block:

body:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element.

For example, the following document fragment and style sheet:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

Similarly, the following document fragment and style sheet:

<h2> Header </h2>     h2 { display: run-in; }
                      h2:after { display: block; content: 'Thing'; }
<p> Text </p>

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }
<p> Text </p>

Question 3

Basically, :before (like :after) is a CSS pseudo-element. So it's almost like a HTML inline element. Almost.

To play with pseudo elements, you need to give it a content property (empty string in most cases). Note that it's an inline element by default, so it can't have width / height. You need to set display: block (or inline-block, or whatever).

I think you missed to set the relative position on the parent element (.parent). There it is :

.parent{
  position: relative;
  top:500px;  
  width:400px;
  border:1px solid green;
}

Question 4

Try looking at this article. it explains how :before and :after pseudo selectors work:

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/