In today's video, we're gonna be talking about CSS pseudo elements, which are one of the most important aspects of CSS when it comes to making dynamic and really powerful CSS that would require tons of JavaScript and HTML to do otherwise.

So, without any further ado, let's get started now.

Welcome back, Toe Web have simplified my name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.

Now, to get started, as I mentioned, we're gonna be talking about pseudo elements.

And if you're unfamiliar as to what those are that is the before and after tags that you'll see a lot in CSS.

And this allows you to add elements into your code strictly from CSS, and it'll either add it before or after.

So we're gonna take a look at this label down here.

This name label, which has a class of required so we could just say required, we're gonna add a before element to it to see exactly what this looks like and One thing you'll note is sometimes you'll see this with one semi colon or one colon instead of to Collins.

And the reasoning for that is that long ago in CSS, they're used to only be one colon.

So everything was one colon.

And then later, when CSS three specifications came out, they decided that two Coghlan's was how you should do before and after.

Essentially, any elements should use to Collins.

So it'll work if you use one colon or to Collins.

But you should definitely use to Collins because that's the newer way to do it.

And that's how it should be done based on the standards and now to get started.

This is just like any CSS element, so we could just come in here, for example, set a with of 10 pixels.

Ah, height of 10 pixels and we could just set a color on its.

We can see exactly what we're looking at, and we'll just set it to read, and then, lastly, we're just gonna make it so that this is going to be display of block letter with and height actually work.

And if you're confused by display Bach display in line, I have an entire video on it looked in the cards and description you can check out.

So now let's save that and you'll notice.

Nothing actually changes over here.

There's no bread box that appears before our name.

And that's because pseudo elements require you to use the content attributes toe actually set what?

The content inside of this before Sudha Element is going to be.

In our case, we don't want any content, so we're just gonna set it to an empty string.

And now, if we say that you'll see that our red boxes showing up before the name, we can do the exact same thing for after.

So it's just copy this down.

Change this toe after and we'll just make it a blue box.

And as you can see below the name, we now have a blue box, and you may think that this is actually showing up before the name label element.

But what's actually happening is if we inspect this here real quick and we go into our level, you'll see that the before and after Sudan elements are inside of the label.

They actually just go before the content.

As you can see this name text here and it'll go after the content, but it doesn't go before the label or after the label.

It's actually inside of label, which is really important.

That means that inputs, for example, cannot have sued elements if we change this to be input.

As you can see, we haven't input here.

We now no longer get a red box above our input, and that is because you can't have a pseudo element on things that don't have content.

Inputs, for example, do not have any content.

It's a self closing tag, as you can see here, so we can't use any pseudo elements on it, which is why this before tag is not showing up and it be the exact same thing with the after tag.

So now that we have a good understanding of what the suit elements are, I want to actually discuss how you can use these in meaningful ways, because making blue and red boxes is pretty useless, and the first thing we can do is this required attributes, and this is actually really easy.

A lot of times when you see a form, for example, it's going to have a little start that shows up after the required fields.

So we can do is we could just change this so that our content is going to be equal to that start.

So now if we save this, you can see any label that we put the class of required on is gonna have a star automatically added to the end of that label.

Because you can see the star is nowhere to be seen inside the label but are after Element here is actually adding that star for us.

That's one incredibly useful way to use these suit elements.

Another really common way to use pseudo elements is toe add new things to an element, such as a tool tip.

As you can see, this button has this data tool tip attributes, which the tool tip Texas inside of it.

It just says tool tip, and what we can do is we can actually select the data tool tip just like this tool tip.

And what we want to do is we just want to add, for example, a after element into this and inside here.

We want the content to be the attributes, so there's a span.

See terminology, oven attribute function in CSS that allows us to access any attributes.

For example, data tool tip.

And now that's the actual content.

And if we save this, you see the tool tip is showing up after the text inside of our submit form inside of our button, which is great.

And I actually have an entire block article about this attribute keyword here, this a t TR function.

So if you want to check that out, it's going to be linked that down in the description below now, to make this tool to actually work we need to do is we actually do absolutely position our tool tip.

So we want to just select our normal tool tip we're gonna do inside here.

Vice ball tool tip correctly is we just want to make sure this is position of relative.

So that way we can absolutely position this element related to the entire button itself that has the tool did.

And if you're unfamiliar about CSS position, I have an entire video covering CSS position.

You can check it out linked in the cards and the description down below.

So now that we have that, we can make this a position of absolute.

We can set the top 100%.

Since we want the tool tip on the bottom, we can set the left to zero and the right to zero.

This is just going to make it stretch the entire with.

And if you see that we now have our tool tip on the bottom, which is great.

Next thing we can do is add a little bit of margin on the top.

Let's say five pixels.

We can add some padding of five pixels and then lastly, wishes at a background color color.

We just want to make this light gray, which is going to look all right.

I think now if we say that you can see our tool tip is showing up down here and all we have left to do is just to make it show up on hover on Lee.

And now when we hover over a button, you can see our tool tip is appearing have been disappearing when we uncover from the button.

This is one of the best ways to use thes different before and after Sudan Elements is just adding this little bit of text in, and we don't have to change our HTML.

All we have is this simple data tool tip, and the CSS takes care of everything for us.

No need for JavaScript, no need for extra HTML.

It's really powerful.

One thing to note, though, is that you can only ever have one after and one before suit element for each element on your page.

That means this name label can't have to after suit elements or two before sued elements.

So if we tried to come in here and add in a label, for example, and we wanted to add the after sieve element, we said the content to you know something else and we save it.

You can see it's not actually showing up over here.

It's still sticking with whichever content is the most specific in our case, this one and it's being overwritten.

So this content right here is never gonna show is being overridden by this content here.

The same thing goes for before, so if we change this to before you can see it now, moves are star up here and now, after pseudo element is showing up.

But of course, if we change this to before now, it disappears because we can only have one before pseudo element like I mentioned before.

And that's all there is to see assess pseudo elements.

If you enjoyed this video, make sure to check out my other videos linked over here.

I subscribe to the channel for more videos just like this one.

Thank you very much for watching and have a good day.