Pseudo-elements are similar to pseudo-classes, but

instead of describing a state, like pseudo-classes do,

pseudo-elements, style certain parts of an element.

And they can insert elements and content, into our page, from our CSS.

Pseudo-elements are exactly what their name implies.

They are phony elements that are not part of the DOM,

the way real HTML elements are.

And they can help keep our HTML cleaner, because they target virtual elements that

are not defined in the markup, and they don't appear in the source code.

Now, there are four types of pseudo-elements in CSS.

So, let's begin by taking a look at the first line, and

first letter pseudo-elements.

Since text in paragraphs is usually fluid on most sites, selecting and

formatting the first rendered line of text, would not be possible with class or

ID selectors, because the line width varies so much.

So, this is where the first line pseudo-element, will sort of work its

magic, by targeting and styling the first rendered line of text, in a paragraph.

No matter how narrow, or how wide, the line of text.

So, back in our latest workspace, let's scroll down to the first paragraph.

And even though the first line of this intro paragraph,

does not have any HTML tags around it,

as we can see here in the markup, we're still able to select it and style it.

So, let's go over to our CSS directory, and open up the style.css file.

And we're gonna create our pseudo-element selector, by first targeting

the class intro, followed by a colon, then we're gonna type, first-line.

[BLANK_AUDIO]

And we're going to give that first rendered line of text,

a font weight property, and we're gonna set the value to bold, and

we're also gonna increase the font size.

So, lets set the font size value to 1.4em.

All right?

So, once we save our style sheets, and refresh the browser,

notice how this selects the first line of the intro paragraph, and

it styles it with those styles we declared.

And if we resize the viewport, we can see how the first line pseudo-element,

will always select the first line of text rendered by the browser,

no matter the line width.

While the first line pseudo-element identifies the first line of

text within an element, we can also use the first letter pseudo-element,

to identify the first letter of text, within an element.

So, first letter will actually target the very first character,

of the first line of text.

And it's commonly used for creating typographical effects like drop caps,

where the first letter on the paragraph is enlarged, to drop down two or more lines.

And this makes the letter stand out from the rest of the paragraph.

So, let's see how we're able to select and

style that first letter of our paragraph, with the first letter pseudo-element.

So, right below the first line rule, we'll again target the intro class.

And this time we're gonna write, colon, first-letter.

[BLANK_AUDIO]

So, let's add a few CSS properties to style the first letter.

Let's first float it left.

An d we're going to change the font size.

Let's set the value to 80 pixels, and let's change the color value to white.

Let's also give it some padding.

So, let's make the padding value, five pixels, ten pixels.

Right below that, let's change the background color,

with a background property.

And we're gonna make it a hex value of pound 384047.

Let's also give it some margins.

So, we'll add a margin property.

And let's set the top margin to ten pixels, the right margin to ten pixels,

and then, bottom zero, left zero.

All right, two more properties.

Let's give it a nice border radius, so, we'll add a border radius property, and

let's set it to five pixels, and finally let's change the line height.

So, let's add a line height property, and set it to one.

Right?

So, let's take a look at our awesome drop cap.

We'll save our style sheet.

And once we refresh the page, we see those new styles applied to the very

first letter of our paragraph, so now it looks like a drop cap, cool.

So, before we continue,

sometimes we might see pseudo-elements that use double colons, instead of one.

Now, the double colon is simply used to distinguish between pseudo-classes, and

pseudo-elements, since pseudo-classes use one colon.

But browsers will still support both values, and

they will work exactly the same way.

So, moving forward, we're going to stick with the double colon syntax.

[BLANK_AUDIO]