💥 2026 New Year's Sale 💥 Take 50% off your first 6 months! (new subscribers only, renews at regular price).

Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Pseudo-Elements - ::before and ::after

8:13 with Guil Hernandez

The ::before and ::after pseudo-elements let us insert virtual elements before and after an element’s content. These virtual elements are visible to the user and are styleable with CSS, but they do not appear in the source code.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Quick Reference

What we need to know about pseudo-elements

The only way we're able to generate pseudo-elements is with the content property.
Pseudo-elements do not work with images and form elements. Replaced elements like input or img have no content, so we shouldn't be able to use generated content for them (source).

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

As their names imply, the before and after pseudo-elements 0:00

let us insert virtual elements before or after an element's content. 0:03

These virtual elements are visible to the user, and 0:08

they're also stylable with CSS, but they do not appear in the source code. 0:11

So, we can actually add new content in element to our page from our CSS. 0:16

This can create some interesting design possibilities. 0:20

So here's what we need to know about the before and after pseudo elements. 0:25

With before and 0:28

after, an element essentially gets two extra layers we can work with. 0:29

So for every element on the page, we're also able to generate two extra elements. 0:33

One before it and one after it. 0:39

And we can style them just like we can style any other element. 0:41

This is called generated content. 0:45

So let's see how we're able to do this. 0:47

In our workspace preview, down here in our download links, 0:49

let's generate some text that indicates the type of files we can download. 0:54

So if we take a look at the markup for that, 0:59

in our index.html file, can see that the first link has the class JPG. 1:00

And the second link has the class zip. 1:06

And we want to generate the text before the link text. 1:10

So for this, we'll need to use the before pseudo element. 1:14

So let's go back to our style.css file. 1:18

And let's scroll down to the bottom. 1:22

And first to create our before pseudo-element for the JPG link, 1:25

let's first target the class jpg followed by two colons then the word before. 1:30

So the only way we're able to generate content with the before and 1:38

after pseudo-elements is with the content property. 1:42

Now the content property is always used in conjunction with these 1:46

two pseudo-elements. 1:50

It's what actually allows the pseudo-elements to create the new box or 1:51

layer of content that's inserted into the page. 1:55

So once we define the content property, 1:59

as the content value will need to include a set of quotes, and 2:02

inside the set of quotes is where we write the content we want to generate. 2:07

So in this case, we wanna generate the text JPG. 2:12

And let's follow that with a space, a dash and 2:16

another space just to create some separation between the text. 2:19

All right? 2:22

So let's also give it a different font size. 2:23

So, right below that, let's add a font size property and make the value 0.75m. 2:26

So once we save our style sheet and refresh our page, we can see that 2:33

the text we wrote in that content value appears right before the first link. 2:39

Pretty neat. 2:45

And we can also insert images using the content property. 2:45

So instead of displaying the file type with text, 2:49

let's insert icons in front of the links. 2:52

So let's go back to our before pseudo-element, and 2:55

this time as the content value, 2:59

we're going to specify a URL with a path to the image we wanna use. 3:01

Our images are in the image directory here. 3:07

So, for the JPG image, let's first define the URL function. 3:10

And inside the parentheses, where we're going to define the path to that image. 3:15

So it's in the image directory and 3:19

the JPG image is called icn dash picture.svg. 3:23

And we're gonna replace the font size property with a margin property just to 3:29

give it some separation on the right side. 3:32

So let's say, margin-right. 3:34

And, set the value to eight pixels. 3:38

So now we'll just go ahead and copy, this before rule, paste one right below. 3:40

So instead of .JPG, we'll target the zip class, and 3:47

change the name of the file to icon zip.svg. 3:50

Notice how this time I didn't use any quotes for the content values. 3:56

Since we're generating an image with the URL function, 4:00

if we did wrap them in quotes they become literal strings. 4:04

So for example, I'm going to write a set of quotes around our URL value. 4:07

And if we save and refresh the page, as you can see, that inserts the actual text 4:14

written in the quotes as the content instead of that image we need. 4:20

So it literally generates what we typed. 4:24

So let's go back and undo the quotes in both content values. 4:27

And once we save our style sheet, and 4:33

look at it again, we're able to see those generated icons next to each link. 4:35

They appear right before the text. 4:41

And, if we view our source code, we can see how the elements do 4:43

not appear anywhere in the HTML source because they're being generated by CSS. 4:47

So it doesn't actually change anything in the document, but 4:52

if we inspect our code in Chrome developer tools. 4:56

So up here in the top right menu, we're going to select, 4:59

More Tools and Developer Tools. 5:02

The neat thing is that we're able to select, and 5:05

inspect, a pseudo element style. 5:07

So here, we're able to see the before pseudo element being inserted into 5:10

our page. 5:14

And we see its associated styles over here in the Styles panel. 5:15

The after pseudo element works just like the before pseudo element except that it 5:20

inserts content after an element. 5:25

So back in our style sheet, if we replace the before pseudo elements with after, 5:28

so let's do it for the JPG rule first. 5:33

Then the zip rule. 5:38

Once we save our style sheet and refresh the page, 5:41

we can see how the icons are now generated after the text. 5:44

But I like them in front of the text. 5:49

So let's go ahead and set both selectors back to that before pseudo-element. 5:51

So, I'm just gonna go ahead and undo them. 5:55

But later, we're gonna generate some more elements with 5:57

that after pseudo-element after link text. 6:00

Now, the neat thing about pseudo-elements is that we can even 6:04

leave the content property empty and still be able to 6:06

insert certain shapes as generated content into the page, so let's see that. 6:10

Let's create a new pseudo-element selector that targets the h1 6:16

element with the before pseudo-element. 6:21

And let's add the content property as we always need to do with pseudo-elements. 6:25

And this time we're gonna make the value an empty set of quotes. 6:29

We're gonna follow that with a display property. 6:34

And let's set the value to inline-block so 6:37

that we're able to position these pseudo-elements shape. 6:40

And let's give it a width, so 6:43

let's say 24 pixels and let's also make the height 24 pixels. 6:45

And we wanna make it rounded, so let's add a border-radius property. 6:52

And, set the value to 50%. 6:58

We'll wanna see it, so let's give it a background color. 6:59

Let's set the value to coral. 7:04

And finally, let's apply some margins. 7:07

So let's add a margin property. 7:09

We'll set the top and 7:11

bottom margins to 0, and the left and right margins to 10 pixels. 7:12

All right. So let's take a look at 7:17

our pseudo-element shape. 7:18

Once we save our style sheet and refresh the page, we can see how that 7:20

creates a nice circular-shaped element before the heading one's text. 7:24

Now we can add one more, 7:31

if we'd like, right after it with the after pseudo-element. 7:32

So, let's go ahead and group this before pseudo element selector, 7:36

with the after selector, so we'll type h1 colon after. 7:40

And once we refresh the page, 7:45

we can see that same pseudo element generated after the h1's text. 7:47

So this is what I meant earlier when I mentioned that the before and 7:52

after pseudo elements give us two extra content layers to work with. 7:55

So as we can see, these are really powerful selectors because we've 8:00

generated two extra elements from a single HTML element. 8:04

And we're able to style them with CSS like regular elements. 8:09

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up