Instructor: So, we talked about pseudo-classes before.
So now let's talk about pseudo-elements, which are
a nice little CSS feature that is worth learning about.
So, pseudo-elements are essentially
elements that don't exist in the HTML
but that we can still select and style in CSS.
And some common examples of that are
the first letter of a paragraph or the
first line of a paragraph or of some other text, of course.
So let's start with that first example
that I gave you of the first letter.
So what we can do using a first letter pseudo element
is to select the very first letter
of this h1 here, which would be this emoji,
and then we could format it differently.
And so with that, we could fix the fact
that this is also italic, which doesn't make a lot of sense.
So in the end, it's gonna look like this,
so no longer italic, and even with some space
there on the right side.
So let's see how that is going to work.
So let's come somewhere down here and then let's say h1,
so we are selecting H one, and then
the pseudo-element is written using two colons.
So colon, colon, and then first-letter.
All right, so pseudo classes are written
with just one colon, and the pseudo-elements
are with two colons.
And so with that, we can easily distinguish
between pseudo-elements and pseudo-classes.
So let's style that very first letter,
and let's say font-style should be not italic, but normal.
And let's also give it some margin
to the right of five pixels.
And there you go.
Do you see that?
Now there is some space, and the text is no longer italic.
Great.
And of course that would also have worked
with any other of the headings and with any other letter.
So of course it doesn't just work with emojis.
So let's say we wanted the first letter here
of the h2 to be a lot bigger.
Let's say font size 60 pixels, for example,
or to make it even more visible, 80 pixels.
And there you go.
So basically, we selected this pseudo element,
which again is not actually an element in the HTML,
but it is as if it was an element that we can select
and then style right here.
Okay, but this one here is not that interesting,
so let's remove it.
and let's try another one, which is first-line.
For example, let's try to select all the paragraphs,
and then in there select and style the very first line.
Let's say we actually want the color
to be red just as a demo.
And so you see that actually worked just fine.
So this is a paragraph and it is the first line.
So it's red, the same here, the same here,
and here and here, and really everywhere.
Right?
Now let me actually show you another
new selector that you don't know yet,
which is the adjacent element selector,
or the adjacent sibling selector.
Som a sibling element is basically
an element that is part of the same parent.
So for example, here, this p is a sibling of this one,
and of this one, and of this one, and all these other ones
because they are all inside of the same container,
which is in this case this article, right?
Now, the adjacent sibling is a sibling
that is actually the very next element.
So for example, the adjacent sibling of this h3
is this paragraph here, okay?
So basically the adjacent element is
the sibling that comes right after it.
And there's actually a selector for that.
So what I want to do is to only select
the paragraphs that come after the h3s.
So that's going to be this one, and this one, okay?
So let's say h3, and then plus.
So the plus here is the adjacent sibling selector.
So if we save that now, then you see, that in fact
only the paragraphs that are immediately after the h3,
so this one, and this one, have been selected.
And then in there, of course, only the first line
has actually been selected and styled.
Okay?
But let's actually turn this off.
It's not that helpful.
But I still want to give you the reference here
of first line, and maybe even more importantly,
of the adjacent sibling selector,
which in some cases is actually quite important.
All right?
But now let's actually use the probably most used,
and most important pseudo element,
which are the after and the before pseudo-elements.
So the after pseudo element creates a pseudo element
that will automatically be the very first child
of the selected element.
And I'm sure that that sounds quite strange,
but this can actually be very useful
for some small cosmetic style for which
we don't want to necessarily add a new element to the HTML.
So let me show you what I mean by that.
And it's easiest to show you in the demo.
So what I'm talking about is this yellow small thing here.
Let's give us some more space so we can actually see it.
So essentially I'm adding this small cosmetic style here,
so simply saying that this is a top article.
Alright?
And so for this very small, let's say thing,
we don't need to add a whole new element into our HTML.
I mean, of course we could do that,
but this is a good use case to show you the
before or the after pseudo-elements.
Alright, let's put it back and go back here.
And so, remember that this element here
is close to this h1 here.
And so what we will do is to create the
after pseudo element, basically after the h1.
So I will just write a code,
and then it will be a bit easier to understand.
So colon, colon, and then after.
And now the first property that is mandatory
to specify here is the content property.
So we specify content, and then here
we need to write something,
and it can actually just be an empty string,
so just this empty text like this.
But in this case, we want top, okay?
But even if you don't want any text in your pseudo element,
you still have to define the content property.
And actually at this point,
this pseudo element should already be visible in our page.
So let's give it a try.
And it looks like it's not there yet,
but let's figure out right here.
Oh, and actually it is here.
You see that it's here in the h1.
So we want it in the h2 actually.
And there it is.
So there is this element that we just created,
and we will style it in a little bit because like this
it doesn't make a lot of sense
but here you can actually see it even in the dev tools.
And as you hover it, it is right there, Okay?
But let's now style it a little bit further.
Let's give it some background color.
I'm gonna use some nice yellow with this code here, ffe70e.
All right.
And so now this looks more like a real element.
Then we can also change the font size.
For example, we can make it bold.
So let's see.
And that looks a little bit nicer already.
And now let's give it some padding.
Now, by default, any pseudo element
is actually an inline element.
And so if we want to give it any padding,
we want the box model to apply to it normally, right?
And so in order to do that,
we need to render this element as an inline-block box.
So display inline-block.
And so this is actually one of
the great use cases of using inline-block,
and so take a note of that maybe.
Now let's add some padding here.
Let's say five pixels to the top and 10 pixels to the sides.
Nice.
So that's already looking quite good,
but now we need to add the final piece of the puzzle,
which is to actually position it in a meaningful place.
So notice how right here, the element is
like, kind of at the end of the element, so at the end,
and half of the element is outside of it.
So while here in our example, let's give
our h2, just temporarily, a background color here,
so we can see what's happening.
So background color orange, Okay?
And so now where we want this pseudo-element
to be located is here a bit outside.
So first, let's put it here in this corner,
and then from that we will move it outside.
So how do you think we can achieve that?
Well, the answer to that is absolute positioning.
All right?
So, the first thing that we need to do
in order to absolutely position an element
is to first give the parent element,
inside of which we want, actually the positioning to happen,
the position relative, remember that.
And so in this case
that's going to be this h2 element.
So position relative,
and now we are ready to absolutely position this element.
So position absolute, and let's put it at the top.
And just to test it for now, let's put put it on the left.
So this will be the top left corner.
And indeed that worked beautifully.
It's right here.
Just notice what happened.
If we turned off the position relative here in the h2,
then this would immediately move up here
to the very top of the page, right?
And so that's why we can never forget position relative
on the parent element inside of which
we want this to happen.
But now we want it here at the right side,
so right here.
And now, let's actually move it out a little bit.
So move it up, and move it to the right, okay?
And the reason why I'm doing that is
so that I can show you something that
we haven't also talked about yet, which is negative length.
So if we specify it here, 25 pixels to the right,
it would move from the right here
in this direction to the left, basically, right?
So 25 pixels from the right into this direction.
However, if we set a negative value,
it will move in the opposite direction.
And so now it is right here.
So outside of the h1, well at least partially, right?
So not the h1, but the h2, of course.
Then at the top, let's do the same.
Let's say minus 10 pixels,
and it could be even a bit more, I guess.
Let's say minus 15.
And so that looks a bit better, okay?
And so now we can get actually a rid of this one here.
And there we go.
So that looks just like this one, right?
Well, it's a bit different.
This one is a bit more up,
so we can move it back down, let's say 10.
And also the color is black, so let's do that here.
And let's stay consistent and use hexadecimal.
And so to make it black, it's zero, zero
and zero all the way.
And so now, let's see, And that looks exactly the same,
but the only difference that it's actually 444,
but that doesn't really matter.
And once again, this element that we just created
and styled does exist here, kind of in
the HTML tree that we can see here in the dev tools,
but of course in our own HTML,
it is nowhere to be found here close to this h2, right?
So CSS, once we declare it here,
will then automatically create it,
and will put it here so that we can style it.
So these styles, of course, then appear
down here in the styles panel,
and here are the usual values of the box model.
Okay.
And so this is how we work with pseudo-elements in HTML.
Now, there's also the before,
but actually that would look exactly the same way.
The difference is that
after will basically become the very last child element
of the one that we are selecting here,
while before will become the very first child element.
So if we change this here to before,
then you see that here switched position,
but since we are positioning this element
in an absolute way, that doesn't matter at all
how the result looks like,
but since we are positioning this pseudo-element
in an absolute way anyway, it doesn't change
how it looks like no matter if we use after or before.
Nice.
So with this, we actually finished this part
of the CSS fundamentals.
So great job and well done for still being with me here,
even as the content is getting a little bit more complex,
and maybe a little bit harder to understand,
but that's just part of the learning journey.
And so just make sure that you really
understand everything that I show you here
by practicing and by always
reviewing the code for each lecture.
Now, the next two lectures will be about
some developer skills that are important for you
as you start your journey as a web developer.
And then after that, we have
one final coding challenge for the section
so that you can practice what we just learned
over these last couple of videos.
So the next few videos are very important
and very exciting I think.
And so see you there soon.