Cool uses of the ::before and ::after pseudoelements
I have a confession to make: I kind of love the
They’re like a couple of henchmen along on any styling adventure.
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
::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:
Suddenly every single
p element on my page will have the word “Hello” inserted before its content. The
pseudoelement is similar, but goes after the content instead.
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:
Simple uses for ::before and ::after
Let’s start with some simple uses for
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:
Another great use of
::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:
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
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
transform, but that’s about it…
But now with
::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!
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
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.
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).
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.
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!