HTML and CSS Reference
In-Depth Information
Before Or Aer What?
Your hunch on seeing the
:before
and
:after
pseudo-elements might
be that the inserted content will be injected before and after the targeted
element. But, as alluded to above, that's not the case.
The content that's injected will be child content in relation to the targeted
element, but it will be placed “before” or “after” any other content in that
element.
To demonstrate this, look at the following code. First, the HTML:
<p class="box">Other content.</p>
And here's the CSS that inserts a pseudo-element:
p.box {
width: 300px;
border: solid 1px white;
padding: 20px;
}
p.box:before {
content: "#";
border: solid 1px white;
padding: 2px;
margin: 0 10px 0 0;
}
In the HTML, all you would see is a paragraph with a class of
box
, with the
words “Other content” inside it (the same as what you would see if you
viewed the source on the live page). In the CSS, the paragraph is given a set
width, along with some padding and a visible border.
