the css pseudo-elements such as :before

Question

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.

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

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

Quote from your link: would cause a solid green border to be rendered around the entire paragraph, including the initial string. — NGLN
– NGLN, Commented Oct 28, 2011 at 3:07

Joseph Marikle · Accepted Answer · 2011-10-28 03:02:32Z

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

answered Oct 28, 2011 at 3:02

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

but I've seen the ppk's blog about :before and :after(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?

No Results Found Over a year ago

Specifically: "...before and after an element's document tree content" See also: stackoverflow.com/questions/2587669/…

Jeff Willener · Accepted Answer · 2011-10-28 03:15:57Z

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.

Alexey Ivanov · Accepted Answer · 2011-10-28 07:03:15Z

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.

Collectives™ on Stack Overflow

the css pseudo-elements such as :before

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related