Welcome back, everyone.
So this will be a relatively brief section.
We don't have much content to cover.
I'm going to talk about the two pseudo elements called before and after We've flirted with them, at
least in one of the projects.
As far as I can remember, we looked at I can't remember if we used before or after we used one of them
and I said we'd come back and you know, at the end of the course you'll learn more about it.
Well, it's time to learn more about these two pseudo elements.
So just as a refresher, pseudo elements are these special things we can add on to certain selectors
that let us style a specific part of the selected elements.
So we've seen things like first line that one is relatively self explanatory.
Select the first line of all paragraphs, make them blue and uppercase.
Right?
We've seen other ones like let's see, first letter that selects the first letter we have Placeholder.
We can use that to style the placeholder text in an input.
And there's a couple more selection is how we can style whatever we have selected and any text a user
has selected with the cursor.
So those don't come up all that often.
I'd say out of all of these, the ones that are actually most common in my day to day usage is after
and before or before and after.
And they also happen to be a little weird.
So if you remember back in the Flexbox project, we made that cost calculator we actually used before
or after to make that slider going across the screen.
And what they do is basically allow us to insert content as a child of an element, but through CSS
without having to edit our markup whatsoever.
So as you can see on this slide here, if I select all divs and then use the before pseudo element,
I then have this special property called content where I can tell CSS, I want you to insert this content.
Hello.
Right before the content in a div and then insert this content goodbye right after the content in a
div.
So this is what we end up with.
Hello and goodbye.
And they go inside the div or selected element.
So I'm going to just demonstrate how this works and then we'll spend some time trying to understand
why this is useful and how you could use it.
So I'll do before, after as the title here and I'll just make sure I do an H one.
Sure, let's say pseudo elements right there as our H one and then I'll link to a style sheet index
CSS, open up indexed CSS.
Let's make our H one bigger font size.
I don't know, five rams.
Let's just quickly open this with our handy dandy live server.
Here we go.
All right.
So let's start by trying the before.
So h one colon, colon before.
And then if I put some content in here, that's a special property we only really use it with before
and after.
I'll put some content in here like before and let's see what happens.
Take a look.
My H one now has content inside that says before, but if I look at the HTML, it's not actually in
there, it's not in the raw markup.
There's just this before pseudo element right there that has the content of before.
And please note it still goes in the H one.
So don't get confused and think that it goes literally before the H one like this.
That is not how it works.
It goes before the content of the H one like that.
And then of course we have after.
H one after content.
I guess I'll set it to after OC and the same thing happens except it goes after the existing content
of the H one and you'll see it's not actually in the markup, but it is showing up here thanks to CSS
and it goes after the content.
And I have just 1h1.
That's all you should ever have on a page.
But if I had a bunch of them, they all get the same styles.
So it doesn't just work once it works on however many elements you select with your selector.
I just have an H one and we have different options for the content.
So sometimes like if I want to just make a box that goes before my H one, I can leave content blank
and then give it a hight, let's say 20 pixels, a width of 20 pixels.
So I'm telling it to make me a box that has nothing in it, just like an empty div, essentially 20
pixels by 20 pixels and let's make it purple and by default it is an inline element, I believe.
So I'll make it a inline block element.
And there it is.
I now have a little purple box inserted into the DOM into the document for me where I didn't actually
have to write it in HTML.
So that is how it works.
Again, you might be wondering why.
What can we do with this?
I'm going to try and show you some different examples in the next few videos.
That's really all we're going to cover in this section.
So I'll be back in the next video to try and prove there's some real utility here.