Понимание: после и: до

Question

http://jsfiddle.net/BtGRt/

Почему содержимое появляется внутри div?Не слева / справа (до / после) div?

Answer 1

Глядя на спецификацию , вы можете видеть, что они вставляются относительно содержимого, а не элемента.

Как показывают их названия,: before и: afterпсевдоэлементы задают местоположение содержимого до и после содержимого дерева документа элемента .

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

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

q: before {content: open-quote;цвет: красный}

Answer 2

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

См. здесь для технических деталей - сгенерированные элементы являются последними / первыми дочерними соответствующего элемента.

Answer 3

Когда вы комбинируете 'content' с: after и: before, он добавляет контент до или после существующего контента.Итак, внутри div.Если вы хотите, чтобы он анализировал дополнения вокруг div в целом, вам нужно что-то вроде

<div id="w">
 <div id="f">World </div>
</div>


#w:before{    
background: yellowgreen;
content: "Hello ";
}
#f{
width: 200px;
height: 200px;
background: gold;
margin: 100px;
padding: 100px;
}
#w:after{    
background: burlywood;
content: "StackOverflow";
}