CODEWITHSUNDEEP
htmlmarkuppseudo-element
Michael Durrant
Michael Durrant

Reputation: 96544

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

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?

Upvotes: 0

Views: 969

Answers (2)

KoenVE
KoenVE

Reputation: 311

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.

Upvotes: 1

Quentin
Quentin

Reputation: 943999

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.

Upvotes: 5

Related Questions