what does ::before really do?

Question

So I read the docs and probably understand the purpose of ::before and ::after. If my understanding is correct, they should always work in combinat

Answer 1

::before and ::after are pseudo elements as you can see on this example:

CSS:

.container-fluid>p::before{
    content: "HI";
}
.container-fluid>p::after{
    content: "Bee";
}

http://jsfiddle.net/vX2jW/ You can read more here: http://css-tricks.com/almanac/selectors/a/after-and-before/

Answer 2

I assume you are seeing that, because chrome inspector shows it for inspection: http://www.youtube.com/watch?v=AcKlJbmuxKo

They are actually not in the original html served from the server but, added by Chrome Inspector there only.

You can use those to view their box model on screen and the styles declared for them.

Also check this: https://stackoverflow.com/a/19978698/774086

Answer 3

::before and ::after refer to CSS pseudo-elements that are created before and after matching elements.

Pseudo-elements are typically not shown in HTML element trees. However, if you are using the right kind of a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.

To verify this behaviour from your Chrome inspector (or other capable tool), try adding some content to some of those pseudo-elements with CSS, for instance:

h1:before {
  content: 'before';
}