what does ::before really do?

html css google-chrome css-selectors

19,970

Solution 1

::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';
}

Solution 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

Solution 3

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

19,970

Author by

dotNET

Programming since the days of FoxPro 2.0 and Windows 98, all the way through VB4, 5, 6. Started working with .NET in 2004 and never looked back. WinForms, OOP, SQL Server and MS-Office programming (both VBA and VSTO) have been my primary areas of interest. Trying to switch to WPF and MVVM now-a-days. Love studying Islam, literature (especially Urdu) and spending some time on SO each day.

Updated on June 02, 2022

Comments

dotNET almost 2 years
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?