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

I'm confused about the pseudo-elements behaviour. I learn from w3c The :before and :after pseudo-elements

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

html:

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

CSS:

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

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

  1. <div id = "breadcrumbs"> это новый контент. Это старый контент. </div>

  2. это новый контент <div id = "breadcrumbs"> это старый контент. </div>

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

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

3 ответы

This slideshow mentions this very question and is a very good bit of information in any case.

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

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

and here's the official documentation

2
добавлено
В частности : "... до и после содержимого дерева документа элемента " См. также: stackoverflow.com/questions/2587669/…
добавлено автор Wesley Murch, источник
но я видел блог ppk о: before и: after ( quirksmode.org/css/beforeafter .html ), в котором говорится: «Это тест: before и: after, с помощью которого вы можете размещать текст или изображение до и после каждого HTML-элемента». вы заметили, что дескрипция «до и после каждого HTML-элемента». Итак, элемент html здесь является текстовым кодом? или обертка?
добавлено автор Jason, источник
спасибо, это очень полезно
добавлено автор Jason, источник

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

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

Source: http://www.w3.org/TR/CSS2/generate.html

Таким образом, он находится в базовом теге.

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

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

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

0
добавлено

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

0
добавлено
все в порядке, спасибо за ваш совет!
добавлено автор Jason, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)