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.

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!

Answer 1

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