So another useful thing about pseudo elements, is that we can use simple CSS

functions, to return generated content based on an element's attribute, and

I'll show you what I mean, so if we take a look at the markup, for

our two download links, notice how the top link's title value.

Is jpg, and the bottom link's title value is ZIP,so,

we're able to generate this exact text next to each link just like we

did with our icons,in the HTML file, you'll notice that our two links,

are nested inside an unordered list, with the class d-loads, or downloads.

So let's go over to our style sheet, and we'll create our pseudo-element rule,

by first targeting the downloads class,then we're

gonna target the descendant anchor elements.

And then we'll add the after, pseudo element,so next,

we'll need to define the content property,and as the value for

this content property, we're going to define the attribute function.

So we're gonna type attr followed by a set of parentheses,and this is

where we'll tell the browser, which attribute's value we want to insert.

In this case, we want to insert a link's title value as content, So

right inside the parentheses let's type title.

Next we'll add a few css properties to style this generated text,so first let's

display it in line block, with the display property and the value in line block.

And we'll follow that with a color property,

where we'll want to set the color back to it's initial color.

So, let's add the value initial, and let's also change the font size,

with a font size property, and let's make the font size value .65em.

And finally, we'll want to give it a little bit of,

separation on the left side, so let's do that with a left margin value of 5 pixels.

So again, what this does is, it takes the value, of the attribute we specify,

which in this case is the title attribute, and it places,

it as text,next to the element,in this case, it will place it after, the element.

So, what we should see now, are the words JPG and

ZIP generated next to each link respectively.

So, let's save our style sheet, and once we refresh the page, that's exactly what

we're seeing,the link's title values are immediately placed after the text.

Cool, and we're able to do this with just about any attribute,so for

instance, sometimes we may want to create a print version of our page.

And for those we'd usually,

like to display a links full URL next,to the link text, since we can't click on it.

So to do that, we can simply insert a links href value as generated content,

So for instance if we replace,title with href and refresh the page.

Notice how that displays the full URL of each link after, the link text, but in

our case, we'll want to display the title value, so let's change it back to title.

So finally, one of the most important things to keep in mind,

about pseudo elements, is that the generated content is

not exactly inserted before or after the actual element like we might think.

It's actually inserted, into the element as child content, so, we'll be able to

see exactly how this happens, if we apply a solid border around our download link.

So, let's go back to our style sheet, and, right below the,

pseudo element rule, we just wrote, let's targets, the downloads class once again.

And the anchor elements inside, and let's apply,

a solid border, with the border property.

So we'll make the value solid, one pixel,so now we should see any

child content, of the download links, contained within this border we set.

So let's take a look,once we've refreshed the page, notice how the generated

content is actually prepended, and appended, to the inside of the elements.

So they're inside of their box model,they're inserted before, and

after, the text, not before, or after the boundaries of the anchor elements.

Before we wrap up,

let's do a quick review of some of the more advanced, selectors we just learned.

First with the Nth child pseudo class, we can select all even or

odd child elements,or we can also get really specific and

use expressions, to target a combination of child elements.

And let's not forget about the nth-of-type pseudo class, for

targeting an element based on its position, no matter where it

is inside the parent, but only if it's a specific type of element.

And the root pseudo class always targets the root of the document,

this will usually be the HTML element,

and remember, the root selector, has more specificity than the html type selector.

The not pseudo class selects everything except the type of element we specify.

Finally, with pseudo elements, we can target virtual elements,

that don't exist in the source code, and we can insert generated,

content into our HTML from our CSS rules.

Again we're not required to memorize every single,

CSS selector available, but it's important that we're at least able to read, and

understand ,and many of the selectors, in case we encounter them in

the wild ,or find ourselves in one of those code conundrums, from earlier.

When we had limited access to the HTML.

To practice these selectors, on your own try revisiting previous projects, and

see if you can use some of these new selectors, in your style sheets.

Or as a good practice exercise, try getting creative, with these selectors and

see how many elements you can target on a page, without having to add any classes.

But try not to get too carried, away using these selectors,

on real projects, as designers and developers, it's our responsibility to

make our code as readable, predictable, and a maintainable as possible.

Imagine opening that project style sheet back up, a few months from now, and

spending hours trying to figure out which elements the selectors are targeting.

Not fun, right, so, that about does it for

CSS selectors, and we're always here to help and motivate you so,

if you have any questions, about the content we've covered in this course,

feel free to reach out to our support team, the wonderful treehouse community,

on our forum, or you can get hold of me on Twitter.

I'm @guilh.

Thanks everyone.