Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
The ::first-line and ::first-letter pseudo-elements let us target the first line of text and the first character in a line of text.
Quick Reference
-
0:00
Pseudo-elements are similar to pseudo-classes, but
-
0:03
instead of describing a state, like pseudo-classes do,
-
0:06
pseudo-elements, style certain parts of an element.
-
0:10
And they can insert elements and content, into our page, from our CSS.
-
0:14
Pseudo-elements are exactly what their name implies.
-
0:17
They are phony elements that are not part of the DOM,
-
0:20
the way real HTML elements are.
-
0:23
And they can help keep our HTML cleaner, because they target virtual elements that
-
0:27
are not defined in the markup, and they don't appear in the source code.
-
0:31
Now, there are four types of pseudo-elements in CSS.
-
0:34
So, let's begin by taking a look at the first line, and
-
0:38
first letter pseudo-elements.
-
0:41
Since text in paragraphs is usually fluid on most sites, selecting and
-
0:45
formatting the first rendered line of text, would not be possible with class or
-
0:50
ID selectors, because the line width varies so much.
-
0:55
So, this is where the first line pseudo-element, will sort of work its
-
0:59
magic, by targeting and styling the first rendered line of text, in a paragraph.
-
1:04
No matter how narrow, or how wide, the line of text.
-
1:08
So, back in our latest workspace, let's scroll down to the first paragraph.
-
1:13
And even though the first line of this intro paragraph,
-
1:17
does not have any HTML tags around it,
-
1:20
as we can see here in the markup, we're still able to select it and style it.
-
1:24
So, let's go over to our CSS directory, and open up the style.css file.
-
1:30
And we're gonna create our pseudo-element selector, by first targeting
-
1:35
the class intro, followed by a colon, then we're gonna type, first-line.
-
1:41
[BLANK_AUDIO]
-
1:44
And we're going to give that first rendered line of text,
-
1:47
a font weight property, and we're gonna set the value to bold, and
-
1:51
we're also gonna increase the font size.
-
1:53
So, lets set the font size value to 1.4em.
-
1:58
All right?
-
1:59
So, once we save our style sheets, and refresh the browser,
-
2:03
notice how this selects the first line of the intro paragraph, and
-
2:08
it styles it with those styles we declared.
-
2:10
And if we resize the viewport, we can see how the first line pseudo-element,
-
2:15
will always select the first line of text rendered by the browser,
-
2:19
no matter the line width.
-
2:21
While the first line pseudo-element identifies the first line of
-
2:25
text within an element, we can also use the first letter pseudo-element,
-
2:30
to identify the first letter of text, within an element.
-
2:35
So, first letter will actually target the very first character,
-
2:39
of the first line of text.
-
2:41
And it's commonly used for creating typographical effects like drop caps,
-
2:46
where the first letter on the paragraph is enlarged, to drop down two or more lines.
-
2:50
And this makes the letter stand out from the rest of the paragraph.
-
2:53
So, let's see how we're able to select and
-
2:56
style that first letter of our paragraph, with the first letter pseudo-element.
-
3:01
So, right below the first line rule, we'll again target the intro class.
-
3:07
And this time we're gonna write, colon, first-letter.
-
3:11
[BLANK_AUDIO]
-
3:15
So, let's add a few CSS properties to style the first letter.
-
3:19
Let's first float it left.
-
3:22
An d we're going to change the font size.
-
3:24
Let's set the value to 80 pixels, and let's change the color value to white.
-
3:32
Let's also give it some padding.
-
3:33
So, let's make the padding value, five pixels, ten pixels.
-
3:39
Right below that, let's change the background color,
-
3:41
with a background property.
-
3:43
And we're gonna make it a hex value of pound 384047.
-
3:50
Let's also give it some margins.
-
3:53
So, we'll add a margin property.
-
3:55
And let's set the top margin to ten pixels, the right margin to ten pixels,
-
4:00
and then, bottom zero, left zero.
-
4:03
All right, two more properties.
-
4:04
Let's give it a nice border radius, so, we'll add a border radius property, and
-
4:09
let's set it to five pixels, and finally let's change the line height.
-
4:13
So, let's add a line height property, and set it to one.
-
4:16
Right?
-
4:17
So, let's take a look at our awesome drop cap.
-
4:19
We'll save our style sheet.
-
4:21
And once we refresh the page, we see those new styles applied to the very
-
4:26
first letter of our paragraph, so now it looks like a drop cap, cool.
-
4:30
So, before we continue,
-
4:32
sometimes we might see pseudo-elements that use double colons, instead of one.
-
4:38
Now, the double colon is simply used to distinguish between pseudo-classes, and
-
4:42
pseudo-elements, since pseudo-classes use one colon.
-
4:45
But browsers will still support both values, and
-
4:48
they will work exactly the same way.
-
4:50
So, moving forward, we're going to stick with the double colon syntax.
-
4:54
[BLANK_AUDIO]
You need to sign up for Treehouse in order to download course files.
Sign up