3

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

So, my question is as follows:

html :

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

css: 

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

I want to know whether the new content insert inside the div tag or outside.

  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>

Which one is the right? Thanks a lot in advance!

animuson
  • 53,861
  • 28
  • 137
  • 147
Jason
  • 35
  • 1
  • 6
  • 1
    Quote from your link: _would cause a solid green border to be rendered around the entire paragraph, including the initial string._ – NGLN Oct 28 '11 at 03:07

3 Answers3

2

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

According to Chris Coyier it would be the first

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

and here's the official documentation

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • but I've seen the ppk's blog about :before and :after(http://www.quirksmode.org/css/beforeafter.html) which says "This is a test of :before and :after, with which you can place text or an image before and after each HTML element." you notice that the descraption "before and after each HTML element".So,the html element here is the textnode? or the wrapper? – Jason Oct 28 '11 at 03:26
  • [Specifically](http://www.w3.org/TR/CSS2/generate.html#before-after-content): `"...before and after an element's document tree content"` See also: http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field/4660434#4660434 – Wesley Murch Oct 28 '11 at 04:36
0

The CSS "content" specified is generated by the browser. Similar to bullets, etc. So the big answer would be it's up to the browser. In fact, IE6 nor IE7 (unless patched) don't understand CSS content property. However IE8 and most other major browsers do. I know this doesn't necessarily answers your question but it will have to take some experimenting on your part. And don't forget to test other browsers.

Jeff Willener
  • 749
  • 4
  • 9
0

According to w3.org's specification:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

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

So it's inside the base tag.

Also you can test it by applying "overflow: hidden;" to base tag and trying to move :after/:before element outside of it with "position: absolute".

Example code: http://jsfiddle.net/VDBex/

As they are clipped, I assume they are position inside of the base tag.

Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27