Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Quick Reference
What we need to know about pseudo-elements
- The only way we're able to generate pseudo-elements is with the
contentproperty. -
Pseudo-elements do not work with images and form elements. Replaced elements like
inputorimghave 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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up