Using the :before and :after Pseudo-Elements

The :before and :after pseudo-elements are an incredibly useful tool in CSS for adding content to an element without changing the HTML structure of the page. In this lesson, we’ll cover what these pseudo-elements are, how they work, and how to use them in your stylesheets.

What are the :before and :after Pseudo-Elements?

The :before and :after pseudo-elements are used to insert content before or after the content of an element. This can be particularly useful for adding visual enhancements or decorations to elements without changing the HTML structure of the page.

For example, you might want to add a decorative border around an element, but you don’t want to add an extra div to the HTML to achieve this. Instead, you can use the :before pseudo-element to add the border.

How do the :before and :after Pseudo-Elements Work?

The :before and :after pseudo-elements are inserted into the page as anonymous inline boxes, which means that they behave like inline elements (such as span or a) but are not visible in the HTML.

To use the :before and :after pseudo-elements, you need to specify the content property in your CSS. The content property determines what content is inserted before or after the element. This can be a string of text, an image, or even a combination of both.

For example, the following CSS would add a triangle before an element using the :before pseudo-element:

.element:before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}

Using the :before and :after Pseudo-Elements in Your Stylesheets:

Now that you know the basics of how the :before and :after pseudo-elements work, let’s take a look at some examples of how you can use them in your stylesheets.

One common use for the :before and :after pseudo-elements is to add decorative elements or enhancements to elements. For example, you might want to add a decorative border or background color to an element.

.element:before {
	content: "";
	display: block;
	height: 10px;
	width: 100%;
	background-color: #333333;
}

You can also use the :before and :after pseudo-elements to add additional content to an element. For example, you might want to add an icon or image before or after an element to provide additional context or meaning.

.element:before {
	content: "";
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url(icon.png);
	background-size: cover;
	margin-right: 5px;
}

Exercises

h2:before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid red;
}

li:after {
	content: "";
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url(checkmark.png);
	background-size: cover;
	margin-left: 5px;
}

p:before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	border: 2px solid blue;
	box-sizing: border-box;
}

div:before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background-color: yellow;
}

a:before {
	content: "";
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url(icon.png);
	background-size: cover;
	margin-right: 5px;
	background-color: purple;
}