I've still got my coffee â˜•, by the way.
I'm really, really enjoying it.
I hope you're having a lot of fun.
Remember to smile â˜º. Remember to enjoy what you do.
Life is short.
So anyway, we're picking up on this form we started.
But as I mentioned, we don't just want a color indication to a user.
What about if they are colorblind?
So it is good practice on required fields to either have an asterisks or the word required.
I like the word required.
I just prefer it.
How can we do that?
Many ways.
But one way, as I mentioned, is to produce generated content using the ::before and ::after pseudo classes.
Sorry, the ::before and ::after pseudo elements.
Now, there is a slight nuance.
Let me just go down to our HTML.
You know, you'd think you could just target our input and then the pseudo element of ::after and ::before.
I wish it were that simple, but let me do a comment here below the input and I specifically want to
do generated content here.
I want to show you how to target the ::before and ::after pseudo elements in order to add content.
Unfortunately, and this is what I didn't mention in the lecture,
unfortunately,
input elements do not support generated content.
And I think we discussed this a long time ago.
I think it was actually in relation to the textarea element, if I'm correct, that they are kind of treated
like CSS replaced elements, in the sense that we can't add the ::before and ::after pseudo elements to them.
Nothing will happen, right?
So unfortunately, input elements do not support generated content.
So let's include a span element
to wrap
the
generated content onto.
Is it kind of making sense?
So all I want to do, is I want to include now right below our input, a span element, an empty span element.
And of course I want to do that on both inputs, right?
We've done it on the one, and now I want to do it on the last name as well.
So there we go.
I've got two spans.
Obviously nothing happens on our page because we haven't put anything in the span.
How do we do that?
Well, it's very, very easy.
First thing I want to do is I want to make this span element a "relative" element.
And I want to do that because when we produce our generated content, I want to set that position property
to absolute.
And when you think of absolute positioning, it gives us a lot of control, but it's got to be absolute
to something and that something is a parent that has its position
property set to relative. And its parent here is going to be the span itself. And we could just target
the span,
okay.
But I want to show you other ways to do it.
I want to show you how you can start using CSS combinators.
Let's start off at our input, and we know the immediately adjacent sibling
is this span.
So that's what I'm targeting here.
And if you hover over it, the IDE actually gives us clues.
It tells you that we're targeting the span that is immediately after that input.
Quite useful.
And that's what that + combinator means, by the way.
And all I want to do here is I want to set its position property to relative.
That's all I want to do.
It really is that simple.
Next, I want to be very explicit.
Let's target that span and let's target now the pseudo element ::after - the ::after pseudo element.
How do we do that?
Well, firstly, again, we can do this more simply, but I want to show you how to start using CSS
combinators and selectors.
Firstly, we only want this to affect input elements that have a required attribute on them, right?
We don't want this to affect the email.
Maybe we put a span there by mistake.
We don't want that to be a required field.
Next we're going to use this adjacent sibling, because we're targeting the span, but this time we want
to target the ::after pseudo element.
Remember the ::after pseudo element, it creates items, but you can't see it in the DOM.
It doesn't really exist on the page, so we can't copy it.
We can't select it with the mouse.
It really is only there for visual purposes.
So let's see how this works.
Firstly, I want to set its position property to what?
To absolute.
Exactly.
And it's going to be now absolute to that span.
Okay.
The next thing is we have to affect this content property and I want the word required. And you can see
it on the browser
my dear students, how awesome is this?
Yeah!
That is cool, but it just looks ugly.
So now we got to think about styling.
Firstly, I want the font-size a bit reduced.
0.7,
how's that?
Oh, I forgot the semicolon at the end ðŸ™ˆ! I thought
what is going on here?
Let's give it a background color of black.
But now we can't see the word.
So let's give the word a white font.
There we go.
Oh, it needs padding hey.
That looks terrible.
Padding, 5 and 10.
Does that look nice?
Man, that looks cool.
I actually quite like that.
But, now because we set this positioning to absolute, we have a lot of control.
For example, we can push this up by affecting the top property.
Let's try 35 pixels.
We can also push it left.
I think 60 pixels will work.
I think this is coming on quite nicely, don't you?
You know what I want to do?
It's not quite aligning.
And I guess part of the reason just thinking about it is that the label element is not block by default.
It's actually inline, and that can cause a few issues.
So why don't I just go to our label,
I don't know if this will solve the issue, but it should help.
Display block.
Yeah, there you go.
It's already looking a bit better.
You know what,
I actually think that's fine.
I mean, we could bring it slightly, slightly down.
Let's go down here.
Maybe we can do 32 pixels.
How's that?
I think that looks fine.
You know, maybe this is stretching too much.
So maybe what we can do, is make the fieldset width 30%.
How does that look?
It probably looks fine, but there you go.
You can play around with it.
But this is just a better way to do things, my dear students. As I mentioned, because it's a pseudo
element we can't select this required.
We can't highlight it in any way, but visually it makes sense, right?
It's telling the user that these two fields are required.
"So is this done then, Clyde?"
Well, unfortunately, it's not quite perfect.
There's still something that I think we should add in order to improve on this form.
But in order for me to tell you that I first want to hop over to another lecture to discuss yet another
type of pseudo class.
See you in the next lecture.