Before Selector

The CSS ::before selector can be used to insert content before the content of the selected element or elements. It is used by attaching ::before to the element it is to be used on.

Let’s look at some examples:

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

span.comment::before {
  content: "Comment: ";
  color: blue;
}
<p> To infinity, and beyond!</p>
<p> I am Buzz Lightyear. I come in peace.</p>

<span class="comment">May the force be with you.</span>
<br/>
<span> Do. Or do not. There is no try.</span>

In the example above we are prepending an asterisk and a space before every paragraph element on the page. Also, we're prepending "Comment: " in blue before every span element with the class comment.

image-186

After Selector

The CSS ::after selector can be used to insert content after the content of the selected element or elements. It's used by attaching ::after to the element it is to be used on.

Here are some examples:

.buzz::after { 
  content: " - Buzz Lightyear";
  color: blue;
}

.yoda::after { 
  content: " - Yoda";
  color: green;
}
<p class="buzz"> To infinity, and beyond!</p>
<p class="yoda"> Do. Or do not. There is no try.</p>

In the example above, we're appending " - Buzz Lightyear" in blue to the element with the class buzz. Also, we're appending " - Yoda" in green to the element with the class yoda.

image-185

Single-colon vs. Double-colon

There’s a bit of discussion about the right way of using pseudo-elements – the old style single-colon (:before), used in CSS specifications 1 and 2, versus the CSS3 recommendation, double-colon (::before), mainly to “establish a discrimination between pseudo-classes and pseudo-elements”.

But for compatibility reasons, the single-colon method is still accepted. Keep in mind that IE8 supports the single-colon notation only.

More Information: