I have a confession to make: I kind of love the ::before and ::after pseudoelements.

They’re like a couple of henchmen along on any styling adventure.

Wolfpack as .wolf with ::before and ::after Like never having to face the world alone - for everywhere there was 1, there is now 3.

3 times the power. 3 times the number of styleable pieces. 3 times the amazing visual effects you can create.

What are pseudoelements?

Now if you’ve never encountered ::before and ::after before, you may be asking “what is this ::before pseudoelement you speak of?”

Here’s the 30 second overview:

Pseudo-elements are “pretend” elements that you can get insert into a document by using CSS. For example, if I were to write the very simple CSS:

p::before {
  content: "Hello!";
}

Suddenly every single p element on my page will have the word “Hello” inserted before its content. The ::after pseudoelement is similar, but goes after the content instead.

The content property sets what they show inside of them, but these elements are completely styleable in exactly the same way as any other element is, so you don’t actually need there to be textual content inside. In fact, many of the most interesting uses are completelhy visual.

If you want a more thorough introduction, I recommend this piece on Smashing Magazine. For this article, I’m going to focus less on how pseudo-elements work and more on a range of amazing examples of the things you can do.

That said, one quick gotcha I want to highlight because it has gotten me so many times. Many of the uses we will explore involve graphics but no actual word content. This is great, but you must set both the content property, and if your content is empty the display property or the pseudoelement will not show up. I’ve been bitten by this many times… so always remember to start by setting content. If your use is entirely visual, simply set:

content: "";
display: inline-block;

Simple uses for ::before and ::after

Let’s start with some simple uses for ::before and ::after.

Custom Icons

One simple and common but very useful use for ::before is to add icons to elements with a particular class. For example, FontAwesome uses this technique to implement its icons. You can use the same approach to do your own custom icons.

Now FontAwesome does this with a custom font and the content property, which has the benefit of automatically sizing based on the element it is placed on. If we want to use an image, we will need to explicitly size it or the pseudoelement will have size 0 and not be visible.

For example, if I wanted to make every element on the page with a .kball class on it show a 30x30 circle with my profile picture it, I could do something like this:

See the Pen qvQJNG by Kevin Ball (@kball) on CodePen.


Quotes

Another great use of ::before and ::after is to add quote marks around a quote. For example, we could create a ‘quote’ class that applies double quotes before and after, and even an attribution class that prepends an m-dash:

See the Pen Quotes using Before and After by Kevin Ball (@kball) on CodePen.


There’s a ton of additional stuff we could cover as common uses, but I want to move on to some of the more exciting things. If you want more like this check out this article.

Advanced Uses of Before and After

Making Shapes

One of the challenges of working in HTML and CSS is the limited number of “basic” shapes you have to work with.

Essentially, every element is a rectangle… and then through clever uses of border-radius and borders you can either round that rectangle into an oval or circle, skew the angles of the corners, or create a triangle out of it. You can of course rotate it once you’re done using transform, but that’s about it…

But now with ::before and ::after, you have 3 times as many “blocks” to play with. Each can be transformed, separately positioned, and rotated. That leads to a phenomenal selection of shapes you can create with pure CSS.

Chris Coyier of CSS Tricks pulled together a great list of the possible shapes here, of which I’ve reproduced my favorite below using ZenDev.com’s color scheme. Believe it or not, this is just 1 HTML element!

See the Pen Alexander Futekov YinYang in Blue by Kevin Ball (@kball) on CodePen.


Displaying Attribute Values

Another super cool use for the ::before or ::after pseudoelement is to display the contents of an attribute.

You can do this by setting content to include attr([attributename])

For example, if you’re using a JavaScript-powered widget that stores some sort of value as a attribute, you can actually display that attribute automatically without having to use any JavaScript to watch it or look at it!

One place I’ve used this before is with the ZURB Foundation slider. The slider works by changing the value in a hidden input… but what if we wanted to make the current value visible on the slider itself? The handle that is being manipulated is just a span… but it gets an aria attribute for the current value, aria-valuenow. By referencing that in a pseudoelement with content: attr(aria-valuenow) we can display it right inline on the handle.

See the Pen Displaying slider value using ::before by Kevin Ball (@kball) on CodePen.


Multistage Animations

One of the most interesting applications I’ve seen is to create multi-stage animations.

These once again take advantage of the fact that pseudoelements give you entire additional elements to manipulate in an animation. You can animate the core element in one direction, and then animate each pseudoelement independently.

For example, this article shows how to create a fancy “sheen” effect on a button on hover (shown in the pen below).

See the Pen Sheen Button Effect by Kevin Ball (@kball) on CodePen.


There’s all sorts of fun things we could potentially do with this. to create super cool microinteractions. Another example here hides the word content visually and swirls it in on click or hover.

See the Pen Word In Button Effect by Kevin Ball (@kball) on CodePen.


Wrapping Up

There is so much that can be done with these pseudoelements it’s hard to cover it all. These are some of the examples I find particularly fascinating - you might also enjoy this roundup on CSS-Tricks - and if you have any examples that get YOU really pumped, do link me to them in the comments below!