Pseudo Elements in CSS

Jesse Caine
A free video tutorial from Jesse Caine
Professional Web Developer
4.6 instructor rating • 3 courses • 39,344 students

Learn more from the full course

CSS Master Course: For Beginners

Create stunning layouts using CSS3

16:57:57 of on-demand video • Updated June 2019

  • Learn how to use CSS to create beautiful websites
English [Auto] OK so this video is kind of the last video we're gonna be doing on learning new selectors and the next videos and we'll be showing you various ways that you can combine all the selectors that we've seen so far. OK. So this video is going to be about some pseudo elements and we've seen pseudo elements something like the place holder so a pseudo element can be identified by the two colons rather than the pseudo classes just one. So OK let's start by making a paragraph full of warm up some. And let's take the first letter and put it inside a span tag just like that and let's see what we got. OK. And let's give some margin on the body here. Margin one hundred and twenty eight pixels. Three hundred and twelve on the left and right OK. So this looks like a pretty basic paragraph. And what we could do here is we could take the span and let's give it a font size of 300 percent and padding right twelve pixels. It's probably should be on each arm but that's not the point of this video so here you can get a effect like this. OK. So this just makes the the first center bigger which you could see that but there's actually a much better way to do this. And I did it like this first just to show you what pseudo classes kind of are. So a pseudo class is sort of like styling a certain amount of your HMO as if it was an element. What I mean by that is using pseudo classes you can select this first letter here in this paragraph as if it was surrounded by a Spanish tag and you were just styling this band tag. Basically what we just did right here but you could do that without having this band tag. So let's get rid of this band tag and we could do exactly what we just did. Style the first letter as if there was an element surrounding it with pseudo elements. So first thing let's just set up the some just some easy styles for the paragraph. Let's give it a line height of 200 percent. Let's look at that. OK. OK. So let's let the paragraph and let's select the first letter. So this is going to do it's going to just style the first letter as if you are selecting the span tag that was surrounding the first letter and you could do the same thing we just did. Font Size 300 percent. Right to pixels so there you go. That's pretty cool because like sometimes it's you want to capitalize your or make your first letter bigger and get rid of that. See what it would look like now. Not so good anyways. That's not the point. So let's do something else. Let's do p tag first line and first line is a little bit different than the first letter. I mean obviously just the first line. But the reason why it's different is because the first letter is kind of like just exactly like selecting the first letter and surrounding in it and it's fantastic. The first line is a bit more flexible than that because if I told you to select the surround the first line here and expand tag and then style that span tag instead once the first off just because the spend just because this line is one line in your code editor doesn't mean that the first line of your paragraph once splayed in the page will contain all this text. Actually it probably doesn't. This line ends in it. OK. This line and then Tier 2 coincidentally enough Actually no. This one comes over here. The point is once you resize the screen it gets a lot smaller. And now the first line is just these few words. So first line is flexible in that it will always match just the first line that's displayed in the browser. So let's look at this font size. 200 percent so it makes the first line bigger. And then you could see it's responsive which you wouldn't be able to do if you were just using a span tag OK. Now let's continue on your let's comment this out. And now we're going to be using some of the more the the pseudo elements that are used more frequently than the other ones because I don't think first letter or first line you usually don't want to style the first line differently. You also usually don't want to style the first letter differently but this one I've seen this trick be used so much. It's not really a trick but the this is used for certain CSF tricks so often certain little hacks or you know you could use this to really powerful OK. So what does before do so before it's kind of like putting a band tag right here and it's like inserting a pseudo element before your text here begins. So when you get there's a content content property and let's just say before then let's give it a color of green. So here we're going to be styling this text. So see it's like this just gets inserted before the rest of the paragraph notice that we can actually selected for some reason we can't highlight it. Not sure why. OK. So let's do let's get rid of the color and let's give it a border top of four pixel solid black. Let's give it a display of block. So you could you could display you get to the display you get at the position you could you could do a lot of stuff to this element. You can basically treat it as if it was an element on the page. So if you did a span right here and whatever you could do to this band you could give it the position of fixed. So it's fixed to the viewport you could put it in the top corner. You could make it the size of the whole screen. You could do anything that you could do with this. You could do with this. So display block width. Two percent and padding bottom 14 pixels. Let's look at this before and let's put these back on. OK. So the thing about this is that the first letter which is kind of weird and I kind of don't like that it does this. But the first letter now isn't the first letter of the paragraph. It's the first letter of the before content. So as you can see it's styling the B here which like I just said I don't really like that I kind of wish that the first letter just ignored the before but whatever but other than that all the styles are kind of working the the font is just leaving the border. But anyways so let's come at these out again and also kind of like before was also after which is the. It's like the exact same thing except it's putting the element at the end. So what's going on here like that. So after. And again content and you'll see a lot of people do stuff like this where they'll do empty stuff because sometimes you might just want to. Like I said you could you could basically do anything with this element. So there's a lot of cool neat things that you could do but in order to do those things you have to be using the content. But sometimes you don't want text. So you'll see a lot is just have it be empty just so you can get that element without without the content the elements not even going to exist at all. So let's see here. So. Well actually let's just say end of article. Let's just see that. End of article in your piece that there is no space because there's no space here. So if I did the space that space would show up at the end and this is still there. OK. All right let's get rid of this. Now let's get rid of this too. I don't want that there anymore. And now let's see what we got. So it's just going to be a normal paragraph OK let's give it this a background color of black just because I want to show you what I'm doing. Position absolute left zero bottom zero right. Forty pixels with 10 percent. Well that should be a semicolon. And let's look at this right. So what just happened is it just got position to the nearest non static element. And so to fix that we could make this position relative and let's give it a padding of 20 pixels. OK. Now let's see what we got. So it's like this OK. So basically what I wanted to do here I want to give it a border board left of one pixel solid black and also a border on the bottom. So just on the left and bottom. And let's make the background color trends. Why does it always do that. Transparent. OK. Now let's circle. We got here. So there's this little effect of the little border like that. So at the beginning of this video if I showed you this and asked you to like copy this you probably would have no real way to do it because you'd probably have to do some hacks with some actual other elements like without using the pseudo elements here. You would just be able to make you know you could just make a span out here and then position it to this and do all that stuff. But one of the things about this is it kind of looks like you're just adding a border to the paragraph. But the problem with how C.S. says borders work if you're putting a border on the left of the paragraph it will always fit the entire left side. So just to have small little borders like this is not really a straightforward to do but you could do it without the need of a third element or a second element because there's just one there's just one element here. There's just one paragraph. And through styling just pure CSX you can get this kind of effect right here. And if you wanted you could make it you can make this a lot bigger 140 like that you could do whatever you want. You could make this be like 60 so I don't think this looks as good. But you know you can make whatever you want with it. I think that looks pretty cool anyways. Actually if I comment out this then it goes away. So like I like I mentioned earlier that you'll see this all the time if you like look on like CSI strict dot com or stack overflow stuff like that. You know if you you might see some YouTube is doing it or whatever. I'm not sure what you're gonna do. You might never see this but I've seen this come up very often because there's some pretty cool things that you could do with it like this although this isn't actually that cool. But anyways you can do cool things with it if you use your imagination and stuff like that. Anyway it's the last thing I want to mention here is that you can't use these pseudo elements on replaced elements replaced replaced. So what does it replace element. I haven't really explained that yet replace elements and HMO are. I think it's basically anything with with a self closing tag. So things like inputs because an input doesn't have inner HMO. If you do look at something like on a tag you know it has the opening tag and the closing tag and text goes inside it for an input. There's nothing that goes inside it. It's it's like a just a self closing tag. And if you want you could put the value here. But so the reason they're called replaced elements is because the browser takes your markup and replaces it with an actual input. So you know the input that you type into the browser just creates this for you. So you don't actually create something like this with JavaScript or anything it just takes it a [REMOVED] and replaces it with this input right here kind of like images except images are replaced by the image that you point to it. But the point is that you can't use these pseudo elements on these on inputs or images or any other element that's replaced. So just thought you should know that. And with that said that's going to be it for this video.