псевдоэлементы CSS, такие как: before

Question

Я запутался в поведении псевдоэлементов. Я учусь у w3c : до и после: после псевдоэлементов

Итак, мой вопрос таков:

HTML:

<div id="breadcrumbs">this is a old content.</div>

css:

#breadcrumbs:before {
    content:"this is a new content."
}

Я хочу знать, будет ли новый контент вставлен внутри тега div или снаружи.

1. <div id="breadcrumbs">this is a new content.this is a old content.</div>

2. this is a new content<div id="breadcrumbs">this is a old content.</div>

Какой из них правильный? Заранее большое спасибо!

Answer 1

В этом слайд-шоу упоминается именно этот вопрос, и в любом случае это очень хорошая информация.

По словам Криса Койера, это будет первый

<div id="breadcrumbs"><span>this is a new content.</span>this is a old content.</div>

и вот официальная документация

Answer 2

Согласно спецификации w3.org:

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

Источник: http://www.w3.org/TR/CSS2/generate.html

Так что это внутри базового тега.

Также вы можете проверить это, применив "overflow: hidden;" создать базовый тег и попытаться переместить: after /: before элемент вне его с помощью «position: absolute».

Пример кода: http://jsfiddle.net/VDBex/

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

Answer 3

Указанный CSS-контент генерируется браузером.Подобно пулям и т. Д. Таким образом, большой ответ будет зависеть от браузера.На самом деле, IE6 или IE7 (если не исправлено) не понимают свойства контента CSS.Однако IE8 и большинство других крупных браузеров делают.Я знаю, что это не обязательно отвечает на ваш вопрос, но это потребует некоторых экспериментов с вашей стороны.И не забудьте протестировать другие браузеры.