33

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?

jsalonen
  • 29,593
  • 15
  • 91
  • 109
dotNET
  • 33,414
  • 24
  • 162
  • 251
  • They're probably placeholders for a JavaScript templating system that just happens to use tokens that look like the ones in CSS. You can confirm by turn off JavaScript and reloading the page. Without knowing what the system is it's hard to say anything more specific. – JJJ May 18 '14 at 08:26
  • @Juhana: This is from Bootstrap's sample templates. (http://getbootstrap.com/examples/dashboard/) – dotNET May 18 '14 at 08:27
  • I don't see anything like that at that link. – JJJ May 18 '14 at 08:28
  • 1
    Well I have this exact link open in my Chrome and right-clicking on any link in the left-column and choosing **Inspect Element** brings this up. – dotNET May 18 '14 at 08:30
  • 3
    Right, the inspector is just showing where the before and after CSS elements are placed. They're not actually in the HTML source (right click -> view page source). – JJJ May 18 '14 at 08:31
  • @Juhana: grrr... you're right. They're not there in the source. Made me feel brainless. Thanks for your input. – dotNET May 18 '14 at 08:34

3 Answers3

25

::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';
}
jsalonen
  • 29,593
  • 15
  • 91
  • 109
  • If Chrome is displaying those pseudo-elements in the inspector then presumably some content is already being added to them. – BoltClock May 18 '14 at 08:33
  • Indeed. But `::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! – jsalonen May 18 '14 at 08:34
15

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

Community
  • 1
  • 1
Farid Nouri Neshat
  • 29,438
  • 6
  • 74
  • 115
8

::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/

VeeeneX
  • 1,556
  • 18
  • 26