Pseudo Elements, ::before and ::after

Three words; Table. Based. Layout. There are few words in web design vernacular as reviled as those three (and Flash™ I guess). But for a long time, Table-based layouts were the tools of the trade, necessary to create a site that looked the same in every browser. Fortunately, the tools we use to create websites have evolved and browsers are adapting new features that let us rethink how we approach designing for the web.

Although they’ve been supported for a while, it’s worth revisiting the power of pseudo elements, particularly the ::before and ::after elements. In the old days, adding design details to an element involved presentational markup that added to the bloat of HTML pages. Today we can easily add visual enhancements to our elements without additional markup. Pseudo elements let us enhance content, add visual cues, and create performant animations, all within our CSS.

---

Content

Let’s start with content. Don’t use pseudo elements to add or manipulate content. If you have content that must be read (text) or seen (images), they should be included in the markup. And accessibility support for pseudo elements is dodgy at best (2 minute Google search). That said, there are some great uses for pseudo elements that don’t hurt accessibility.

Quotes

Have you heard about the quotes property? Go ahead, [read about it](https://css-tricks.com/almanac/properties/q/quotes/), I’ll wait. All caught up? Super cool, right? Using the quotes property we can add quotation marks with some simple CSS and the content rule. Now let’s put it into practice. The following example adds quotation marks to a quote and styles the open quote mark to add emphasis to the element.

URLs

Sometimes you need to print a web page. I know, you’re probably saying “What is this, the 90’s?” So maybe someone you know needs to print a web page. And then they want to bring that to a friend’s house and say, “Look at this webpage! We should fire up AOL and check out these links.” How are they going to do that? You can’t click a link on a piece of paper. What you can do is type a URL into your browser. Adding those URLs to a print stylesheet is simple, using the ::after pseudo element.

---

Icons

My favorite use of pseudo elements, using ::before or ::after to add icons to other elements, can be a great way to add visual cues without extra markup. Twitter link? Add a ::before element. Read More? Add an ::after element. Read more on Twitter? Add both! OK, maybe not but there’s a lot of power in being able to add icons without having extra markup.

Before we get too far into looking at examples, I wanted to point you to a wonderful tool called Grunticon. Grunticon takes SVG files, creates png versions for older browsers, and then url-encodes them into CSS files to use on your site. It really does save a ton of time and makes sure that your images still work on older browsers. It also means fewer requests since all your icons are embedded in one CSS file. In a number of the following examples I use a url-encoded SVG file to add an icon as a background image but you could use a more traditional image format like .png or .gif if that’s easier for you.

OK, let’s take a look at some examples.

A Simple Icon

Our first example uses a pseudo ::before element to add a Twitter icon to a link. Pretty simple, right?

Icon Stacks

But what if we want to take that a step further? What if we’re working on a design that has icons in various states, like this:

If we were making image files for each of these variations, we would need six different files. But if we break these into file type and state icons, we can cut that down to four. Not a huge change but if we introduce another file type or 3, we don’t need a ton of new files. And using ::before and ::after pseudo elements we can make stacked icons that scale easily. Take a look:

---

Animation

When you take a step back and look at the changes that have impacted how the web is made—Web Standards, CSS3, Responsive Design—it’s easy to see the paradigm shifts. If I were to guess, I would say that the current era of web design will be defined as the time of Interaction. Now that our browsers and our tools have matured to the point where typography and layout are no longer a challenge, we can focus on enhancing the experience for our users. Animation is certainly not a silver bullet but, used sparingly, can bring focus to elements that need a bit more than just a color change.

Animated Borders

Animating the border color can be an effective way of highlighting a selected or hovered element. Changing the width of the border, however, is not that simple. The following example is a 2 for 1. The first part demonstrates adding an ::after pseudo element to create a highlighted state for a menu item. The second example shows how an ::after pseudo element can be used to animate the size of a border on an element, something that would typically change the height of the element unless a height was specified.

Shadows

The box-shadow property can be a powerful way to add depth to a design. But animating shadows can perform poorly if you’re not careful. Tobias Ahlin’s article “How to animate "box-shadow" with silky smooth performance” does a great job of explaining the issues that can arrise and an alternate approach to animating the box-shadow property. The gist of it is that animating a box-shadow on an element can cause the browser to repaint that element, an intensive process. Here’s an example using a simplified version of Tobias’s code to show how you can achieve better performing shadow animations:

---

These are just some of the ways you can use pseudo elements to enhance a design. Knowing what’s possible can change the way you approach applying style to a website. Keep experimenting and I’m sure you’ll find new uses for ::before and ::after.