What's the ::before and ::after that I see in the HTML element inspector?

Question

Our sites use markup like this in a few places:

<header class="row">
  ::before
  <h1 class="entry-title">Privacy Policy</h1>
  ::after
</header>

What does the ::before and ::after signify and how could I use them?

Possible duplicate of [What do ::before and ::after mean?](http://stackoverflow.com/questions/22484020/what-do-before-and-after-mean) — TylerH, Mar 09 '16 at 14:33
Also: [What is the ::before or ::after expression, and why is it shown in the browser developer tools?](http://stackoverflow.com/q/26433223/1591669) — unor, Mar 10 '16 at 14:56

score 5 · Accepted Answer · answered Mar 09 '16 at 14:22

5

You should not see those in markup.

You may see them in the element inspector in various browsers developer tools.

They represent the before and after pseudo-elements that you can generate with CSS.

answered Mar 09 '16 at 14:22

Quentin

914,110
126
1,211
1,335

score 1 · Answer 2 · answered Mar 09 '16 at 14:27

The ::before element inserts an html element before the given element, just as the ::after element inserts an html element after the given element. (as described here, try-it-yourself)

For example:

index.html

<html>
    <head>
         <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <p>World</p>
    </body>
</html>

style.css

p::before {
    content: "Hello ";
}

p::after {
    content: "!";
}

This will result in Hello World! on your HTML page.

What's the ::before and ::after that I see in the HTML element inspector?

2 Answers2