So I read the docs and probably understand the purpose of ::before and ::after. If my understanding is correct, they should always work in combination with other elements. But the web page I'm looking at has got something like this:
<body>
<div class="container-fluid">
::before
<div> ... </div>
::after
</div>
<body>
I'm not able to understand what ::before and ::after are doing here?
::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';
}
::before and ::after are not displayed in the actual page. Also, I'm referring to HTML element structure, not the actual view of the page, but I can see I wasn't exactly enough with that!
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
::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/
