Three Practical Uses of the :before and :after CSS Pseudoselectors

As they come up in my work, :before and :after are a sort of fire escape, letting you quickly route around problems that could otherwise be quite difficult.

In my recent WordPress client work, I’ve had a couple of occasion to appreciate the :before and :after CSS pseudoselectors. As they come up in my work, they’re a sort of fire escape, letting you quickly and simply route around problems that could otherwise be quite difficult. JavaScript is similar, but it’s more of a rooftop helicopter—a lot more setup and complexity going on, with quite a bit more potential power as well. A lot of times, the fire escape is more than enough.

In today’s article, I’ll explore three practical uses of :before and :after, to encourage you to think about when they might be helpful in your own work.

The Big Picture on When to Use :before and :after

:before and :after exist to programmatically furnish existing HTML elements with additional text or image content.

:before and :after are two CSS important pseudoselectors. I’ve recently written in depth about pseudoselectors, so if you need a primer on how to use them, please check that article out.

:before and :after have many uses, but they exist for a single consistent purpose: to programmatically furnish existing HTML elements with additional text or image content.

That may sound fancy, so here’s a folksy analogy: let’s say I’m sending out gift boxes, and I’ve decided that every gift box should get an identical red ribbon. I would use :before or :after to dictate the appearance of the red ribbon.

To bring this home, let’s look at three practical uses of :before and :after, from most standard to most intricate.

1. Centralizing Styling for the “Required Field” Marker

If adorning content with other content sounds odd, let’s take a very common example: the red “required” asterisk that tells you you need to fill out a given element of a web form.

“Required Field,” the Simple but Repetitive Way

One easy way to make this asterisk show up is to place it each time directly in your HTML markup:

But this makes write an awful lot of markup for a single red asterisk. Moreover, what if we want to change all those asterisks to circles, or to the word required really small? Or to turn them all green? We’d have to make the same change across every one of our duplicates.

“Required Field,” Using :after

A somewhat more elegant way to get the same result is with :after. We’ll combine this CSS:

.required-field:after {
	content: " *";
	color: red;
}

With this HTML markup:

<span class="required-field">Name</span>
<span>Phone</span>
<span class="required-field">Email</span>

That gives this result:

Name
Phone
Email

Simple, right? Moreover, the rules for .required-field:after are centralized into one place, so you can change the look—color, size, even content—of your “required” marker across your site all at once.

You can imagine similar logic being applied to other repeated text adornments. For example, :before—together with the Font Awesome icon library—is how we created the custom “wedge” look of the li bullets in our unordered lists:

• WPShout’s ul lis look like this
• thanks to Font Awesome and :before rules.

2. Inserting Content Without Changing WordPress Template Files

This is a real example from a recent WordPress client project. The client wanted a shipping notice in the header on every page—but the theme makes adding anything but a search bar and a shopping cart difficult. Rather than start tearing apart PHP templates, I did the following:

To pull that CSS out, it’s:

div#top-bar:after {
    content: "Free shipping in the continental US!";
    display: block;
    float: none;
    clear: both;
    text-align: right;
    margin-right: 1rem;
    font-style: italic;
    padding-top: .5rem;
}

This places the message Free shipping in the continental US! on the line below the #top-bar div, right-justified.

A takeaway from this is that you can style your :before and :after pseudo-elements extensively—making them break page flow, float right or left, take on margins and padding, and so on. They’re not just “inline-y” elements like our required asterisk example above.

3. Opaque Text on a Semitransparent Image Background

There’s no such thing as background-opacity in CSS.

CSS makes it surprisingly tricky to have an element with fully opaque text above a semitransparent image. There’s no such thing as background-opacity in CSS, so you’re stuck setting opacities for the whole element—which means not only the background, but the content above it.

We’ll look first at the default broken attempt at a semitransparent background, and then at the working solution:

The Wrong Way

We might work toward our result using CSS like the following:

.is-semitrans {
	background-image: url(https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2016/04/converse-fields-768x574.jpg);
	background-position: center;
	background-size: cover;
	opacity: .5;
	height: 10rem;
	padding: 1rem;
	font-size: 2rem;
	color: #000;
}

Combined with the following HTML:

<div class="is-semitrans">This is <em>not</em> what we want.</div>

We get this:

See the washed-out text? It, too, is semitransparent, just like the image under it. Not what we want.

The Right Way

We can do this properly with :before. We do it by combining this CSS:

.with-semitrans-bg {
	position: relative;
	height: 10rem;
	padding: 1rem;
	font-size: 2rem;
	color: #000;
	z-index: 1;
}

.with-semitrans-bg:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2016/04/converse-fields-768x574.jpg);
	background-position: center;
	background-size: cover;
	opacity: .5;
	z-index: -1;
}

With this HTML:

<div class="with-semitrans-bg">This <em>is</em> what we want.</div>

All that gives this result:

How does this work? By using :before to “layer” a full-sized, absolutely positioned semitransparent image under the main element (the one that contains the text). This image layer can have whatever opacity we want without disrupting the main layer.

:before you Leave…

Thanks for reading! I hope you better understand :before and :after, their usefulness in WordPress and web development projects generally, and how they can start to help you simplify otherwise difficult problems. If you have any questions or comments, I’d love to hear them below!