псевдо-елементи css, такі як: раніше

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 про: до і після: ( quirksmode.org/css/beforeafter .html ), що говорить: "Це тест: до і після: після, з яким ви можете помістити текст або зображення до і після кожного елемента HTML". ви помітили, що опис є "до і після кожного елемента HTML". Таким чином, html елемент тут - textnode? або обгортка?
додано Автор Jason, джерело
спасибі, це дуже корисно
додано Автор Jason, джерело

Згідно з специфікацією w3.org:

Автори вказують стиль та місце розташування згенерованого вмісту з   : до і після: псевдоелементів. Як показують їх назви,   : перед і: після псевдо-елементів вкажіть розташування вмісту   до і після вмісту дерева документів елемента . Контент'   власність, у поєднанні з цими псевдоелементами, вказує, що таке   вставлено.

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

Отже, це всередині основного тегу.

Також ви можете протестувати його, застосуючи "переповнення: приховане"; щоб створити тег і намагатися перемістити: після /: перед елементом, що знаходяться поза ним, з "позицією: абсолютним".

Приклад коду: http://jsfiddle.net/VDBex/

Коли вони обрізані, я припускаю, що вони розташовані всередині основного тегу.

0
додано

Указаний "зміст" CSS генерується браузером. Подібно до куль і т. Д. Отже, велика відповідь - це браузер. Фактично, IE6 чи IE7 (якщо не виправлено) не розуміють властивості вмісту CSS. Проте IE8 і більшість інших основних браузерів роблять. Я знаю, що це не обов'язково відповідає на ваше запитання, але вам доведеться пройти деякі експерименти з вашого боку. І не забудьте протестувати інші браузери.

0
додано
це все гаразд, спасибі за вашу пораду!
додано Автор Jason, джерело