Up next in 10
Learn CSS Pseudo Elements In 8 Minutes
135 views
Feb 7, 2024
"Learn CSS Pseudo Elements In 8 Minutes" is an educational video designed to teach viewers about CSS pseudo-elements within a short timeframe. The video likely covers various pseudo-elements such as ::before and ::after, explaining how they can be used to add content or style elements without modifying the HTML structure. The creator may provide clear explanations and practical examples to demonstrate how pseudo-elements work and how they can be utilized to enhance the design and functionality of web pages. By condensing the material into a brief duration, the video offers a quick and accessible way for viewers to learn about CSS pseudo-elements and incorporate them into their web development projects. Viewers can expect to gain a solid understanding of CSS pseudo-elements within a short period of time.
View Video Transcript
0:00
Hello everyone. In today's video, we're going to be talking about CSS pseudo-elements
0:05
which are one of the most important aspects of CSS when it comes to making dynamic and really
0:11
powerful CSS that would require tons of JavaScript and HTML to do otherwise
0:17
So without any further ado, let's get started now. Welcome back to WebDev Simplified
0:25
My name's Kyle, and my job is to simplify the web for you, so you can start building your dream project sooner
0:32
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one
0:37
Now to get started, as I mentioned, we're going to be talking about pseudo elements, and if you're unfamiliar as to what those are
0:43
that is the before and after tags that you'll see a lot in CSS
0:48
and this allows you to add elements into your code strictly from CSS
0:53
and it'll either add it before or after. So we're going to take a look at this label down here
0:59
this name label, which has a class of required, so we can just say required, and we're going
1:04
to add a before element to it to see exactly what this looks like. And one thing you'll note is
1:09
sometimes you'll see this with one semicolon, or one colon instead of two colons. And the reasoning
1:14
for that is that long ago in CSS, there used to only be one colon, so everything was one colon
1:20
and then later, when CSS3 specifications came out, they decided that two colons was how you should
1:25
do before and after. Essentially any elements should use two colons. So it'll work if you use
1:31
one colon or two colons, but you should definitely use two colons because that's the newer way to do it
1:36
and that's how it should be done based on the standards. And now to get started, this is just like
1:40
any CSS element. So we can just come in here, for example, set a width of 10 pixels, a height
1:46
of 10 pixels, and we can just set a color on it so we can see exactly what we're looking at
1:51
and we just set it to red And then lastly we just going to make it so that this is going to be display of block so that our width and height actually work And if you confused by display block display inline I have an entire video on it linked in the cards and description you can check out So now
2:06
let's save that, and you'll notice nothing actually changes over here. There's no red box that
2:10
appears before our name, and that's because pseudo elements require you to use the content
2:14
attribute to actually set what the content inside of this before pseudo element is going to be
2:20
In our case, we don't want any content, so we're just going to set it to an empty string
2:25
And now if we save that, you'll see that our red box is showing up before the name
2:29
We can do the exact same thing for after. So let's just copy this down, change this to after, and we'll just make it a blue box
2:37
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
2:48
and we go into our label, you'll see that the before and after pseudo elements are inside of the label
2:55
They actually just go before the content, as you can see this name text here, and it'll go after the content
3:00
But it doesn't go before the label or after the label, it's actually inside of the label, which is really important
3:06
That means that inputs, for example, cannot have pseudo elements. If we change this to be input, as you can see we have an input here, we now no longer get a red box above our input
3:17
And that is because you can't have a pseudo-element on things that don't have content
3:21
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
3:28
which is why this before-tag is not showing up. And it'd be the exact same thing with the after tag
3:34
So now that we have a good understanding of what the pseudo-elements are, I want to actually discuss how you can use these in meaningful ways
3:40
because making blue and red boxes is pretty useless. And the first thing we can do is this required attribute
3:45
And this is actually really easy. A lot of times when you see a form for example it going to have a little star that shows up after the required fields So what we can do is we can just change this so that our content is going to be equal to that star So now if we save this you can see any label that we put the class of required on is going
4:03
to have a star automatically added to the end of that label
4:06
As you can see the star is nowhere to be seen inside the label, but our after element here
4:10
is actually adding that star for us. That's one incredibly useful way to use these pseudo elements
4:16
Another really common way to use pseudo-elements is to add new things to an element such as a tooltip
4:23
As you can see this button has this data tooltit attribute, which the tooltip text is inside
4:27
of it, it just says tooltip. And what we can do is we can actually select the data tooltip just like this, tooltip
4:36
and what we want to do is we just want to add, for example, an after element into this
4:41
And inside of here, we want the content to be the attribute
4:45
So there's this fancy terminology of an attribute function in CSS that allows us to access
4:50
any attributes, for example, data tooltip, and now that's the actual content
4:56
And if we save this, you see the tool tip is showing up after the text inside of our
5:00
submit form, inside of our button, which is great. And I actually have an entire blog article about this attribute keyword here, this ATTR function
5:08
So if you want to check that out, it's going to be linked down in the description below
5:12
Now to make this tooltip actually work, what we need to do is we need to do is we're going to we actually need to absolutely position our tooltip
5:18
So we want to just select our normal tooltip. What we want to do inside of here, if I spell tooltip correctly
5:24
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 tooltip
5:33
And if you're unfamiliar about CSS position, I have an entire video covering CSS position
5:38
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
5:45
We can set the top to 100 since we want the tooltip 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 width And if you see that we now have our tooltip on the bottom which is great
5:59
Next thing we can do is add a little bit of margin on the top, let's say 5 pixels
6:04
We can add some padding of 5 pixels. And then lastly, let's just add a background color
6:10
We just want to make this light gray, which is going to look all red, I think
6:15
Now if we save that, you can see our tooltip is showing up down here, and all we have left
6:19
to do is just to make it show up on hover only, and now when we hover over our button
6:24
you can see our tooltip is appearing, and then disappearing when we unhover from the button
6:28
This is one of the best ways to use these different before and after pseudo elements is just
6:33
adding this little bit of text in, and we don't have to change our HTML
6:37
All we have is this simple data tooltip, and the CSS takes care of everything for us, no
6:41
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 pseudo-element
6:51
for each element on your page. That means this name label can't have two after-sudo-elements
6:56
or two before pseudo-elements. So if we tried to come in here and add in a label, for example
7:02
and we wanted to add the after-suit element, and we set the content to something else
7:08
and we save it. You can see it's not actually showing up over here. It's still sticking
7:12
with whichever content is the most specific, in our case, this one, and it's being overridden
7:17
So this content right here is never going to show because it's being overridden by this content
7:21
here. The same thing goes for before, so if we change this to before, you can see it now moves
7:26
our star up here, and now our after pseudo element is showing up. But of course, if we change this
7:31
to before, now it disappears because we can only have one before pseudo element, like I mentioned
7:36
before. And that's all there is to CSS pseudo elements. If you enjoyed this video
7:40
make sure to check out my other videos linked over here and subscribe to the channel for more videos
7:45
just like this one. Thank you very much for watching and have a good day