CSS Before and After Selectors: A How-To Guide

The CSS ::before selector inserts content before a selected element. CSS :after inserts content after a specified element. These selectors are commonly used to add text before or after a paragraph or a link.

When you’re designing a website, you may want to add in content before or after the content of an element appears. For instance, you may want to add an image before each bullet point in a list.

That’s where the CSS ::before and ::after pseudo-elements come in. These pseudo-elements allow you to insert content before or after the content of an element.

This tutorial will discuss, with reference to examples, how to use the ::before and ::after pseudo-elements to decorate content on a web page. By the end of reading this tutorial, you’ll be an expert at using the ::before and ::after pseudo-elements in CSS.

CSS Pseudo-Elements

A pseudo-element is a special keyword that allows you to style a specific part of the elements selected by a CSS selector. We’re going to refer to pseudo-elements as selectors throughout this article because every pseudo-element is a selector.

Pseudo-elements are useful when you want to apply a style to an element without adding any CSS classes or IDs to the element. For instance, if you want to add a “>” arrow after every link on a web page, you could use a pseudo-element.

CSS offers a wide range of pseudo-elements. These include ::first-line, ::first-letter, ::before, and ::after. For the purposes of this tutorial, we’ll focus on the last two: ::before and ::after.

Pseudo-elements are typically represented using a double colon (::). While CSS3 does support using the single colon syntax (:) to declare a pseudo-element, using the two colon notation is best practice.

This is because the two colon notation is used to distinguish pseudo-classes from pseudo-elements.

CSS ::before Pseudo-Element

The ::before pseudo-element adds content that appears before an element on a web page. Often, this element is used to add text before a paragraph.

The syntax of the ::before pseudo-element is:

selector::before {
	// CSS rules
}

The ::before selector is added after the name of the element to which you want to apply the selector.

Here are the main components of the ::before pseudo-element:

• selector refers to the selector to which ::before should be applied. So, if you want to apply a ::before element to every “a” tag, your selector would be “a”. Or if you wanted to apply a ::before element before every element with the class name “link”, you would use the “.link” selector.
• ::before tells the browser to add the content of the CSS rules before the selector.
• CSS rules are the rules that should be applied before the selector.

If you’re interested in learning more about how selectors work in CSS, read our guide to CSS selectors.

Let’s walk through an example to demonstrate how the ::before pseudo-element works.

::before CSS Example

Suppose we want to add a link emoji (🔗) before every link on an example web page. We could accomplish this task using the following code:

index.html

<a href="https://careerkarma.com">This is a link to the Career Karma webpage.</a>

styles.css

a::before {
	content: "🔗";
}

Our code returns:

In our HTML file, we defined an HTML <a> tag which links to the Career Karma homepage. Then, in our CSS file, we used the ::before pseudo-element to add the link emoji before every <a> tag on our web page.

We accomplished this by specifying a content property in our CSS file, which looks like this:

content: “🔗”;

Our rule has added a link emoji to the start of our <a> tag that we created.

The value for the “content” attribute can be:

• A string, such as “This is a string.”.
• A counter, such as “counter(li);”.
• An image, such as “url(/path/to/image.png)”.
• A blank string, such as “”.

You cannot insert an HTML element into the content attribute.

The CSS ::after Pseudo-Element

The CSS ::after pseudo-element allows adds content immediately after an element on a web page. Like the ::before selector, ::after is often used with links or paragraphs of text.

The syntax of the ::after pseudo-element is as follows:

selector::after {
	// CSS rules
}

The syntax for ::after is the same as the syntax for the ::before pseudo-element. ::after accepts the same values for the “content” attribute that we discussed earlier.

::after CSS Example

Suppose we are designing a link element on a website for a bakery called Hansons Bakery. This link should display the text “Go to the Hansons Bakery homepage.” Our link should be surrounded by a 1px-wide solid black border.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

After our label, we want a box of text to appear with the contents This page shows off our baked goods menu. (Notice the white space before the word “This”.) Our box should have an orange HTML background color.

We could accomplish this task using the following code:

index.html

<a href="/" class="label">Go to the Hansons Bakery homepage.</a>

styles.css

.label {
	border: 1px solid black;
}

.label::after {
	content: " This page shows off our baked goods menu.";
	background-color: orange;
}

Our code has generated content that looks like this:

In our code, we defined a link to our homepage using an <a> tag. The class name associated with our link is .label.

In our CSS file, we applied a 1px-wide solid black border around every element with the class name .label.

Then, we used the ::after selector to create the box of text we described earlier. The box of text displays the content “This page shows off our baked goods menu.” Our box has an orange background.

Conclusion

The ::before and ::after pseudo-elements allow you to add content to a specific part of an element you have selected in a CSS rule. For instance, the ::before selector could be used to add text before a link. The ::after selector could be used to add an emoji after a paragraph of text.

This tutorial discussed, with reference to examples, the basics of pseudo-elements in CSS and how to use the ::before and ::after pseudo-elements. Now you’re ready to start using the ::before and ::after pseudo-elements in your CSS code like a professional web designer.

For advice on top CSS web developer learning resources, books, and courses, check out our How to Learn CSS guide.