3a 3abefore in css

1The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
2
3div::before {
4  content: "before";
5}
6div::after {
7  content: "after";
8}
9<div>
10  before
11  <!-- Rest of stuff inside the div -->
12  after
13</div>
14
15The only reasons to use one over the other are:
16
17You want the generated content to come before the element content, positionally.
18The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

1p::before {
2  content: "Read this: ";
3}

1h2:before { 
2    content: "Read: ";
3<span class="Apple-converted-space">    color: #F00;</span>
4}

1p::before {
2  content: "Read this: ";
3}