0

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?

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
  • 3
    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

2 Answers2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

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.

KoenVE
  • 301
  • 2
  • 11