Как работает: до работы в css?

Авторы определяют стиль и расположение сгенерированного контента с помощью: before и: after псевдоэлементов. Как показывают их имена, псевдовые элементы: before и: after определяют местоположение содержимого до и после содержимого дерева элементов элемента. Свойство "content", в сочетании с этими псевдоэлементами, указывает, что вставлено.

Ниже представлено дерево документов с HTML как root.

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

Например, следующее правило вставляет строку "Примечание:" перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":

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

Объекты форматирования (например, ящики), сгенерированные элементом, включают сгенерированный контент. Так, например, изменение указанной таблицы стилей на:

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

приведет к созданию сплошной зеленой границы вокруг всего абзаца, включая начальную строку.

Псевдоэлементы: before и: after наследуют любые наследуемые свойства от элемента в дереве документов, к которому они прикреплены.

Например, следующие правила вставляют открытую метку кавычки перед каждым элементом Q. Цвет метки кавычки будет красным, но шрифт будет таким же, как и шрифт остальной части элемента Q:

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

В a: before или: после объявления псевдоэлемента непривитые свойства принимают свои начальные значения.

Так, например, поскольку начальное значение свойства "display" является "inline", цитата в предыдущем примере вставляется как встроенное поле (то есть в той же строке, что и исходное текстовое содержимое элемента). Следующий пример явно устанавливает свойство display для "block", так что вставленный текст становится блоком:

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

Элементы: before и: after псевдоэлементы взаимодействуют с другими блоками, такими как окна ввода-вывода, как если бы они были реальными элементами, вставленными только внутри их связанного элемента.

Например, следующий фрагмент документа и таблица стилей:

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

... будет отображаться точно так же, как следующий фрагмент документа и таблица стилей:

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

Аналогичным образом, следующий фрагмент документа и таблица стилей:

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

... будет отображаться точно так же, как следующий фрагмент документа и таблица стилей:

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

Попробуйте взглянуть на эту статью. он объясняет, как: до и: после псевдоселекторов работают:

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

В основном :before (например: after) является псевдоэлементом CSS. Так что это почти как встроенный элемент HTML. Почти.

Чтобы играть с псевдоэлементами, вам нужно content свойство content (в большинстве случаев - пустая строка). Обратите внимание, что это встроенный элемент по умолчанию, поэтому он не может иметь ширину/высоту. Вам нужно установить display: block (или встроенный блок или что-то еще).

Я думаю, вы пропустили установку relative позиции на родительский элемент (.parent). Вот он:

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